/* RowMinder design tokens. Light is default; dark via [data-theme="dark"] or system preference. */
:root {
  /* Brand */
  --clay-700: #8F3A1E;
  --clay-600: #A94626;
  --clay-500: #C2582F;
  --clay-300: #E9A07F;
  --clay-100: #F7E3D8;
  --sage-600: #3F6B54;
  --sage-500: #5A8A70;
  --sage-100: #DDEBE2;
  --honey-500: #E9B44C;
  --honey-300: #F4D58D;
  --honey-100: #FBEFD2;
  --plum-500: #8A5A9E;
  --sky-500: #4A86B8;
  --rose-500: #D9677D;

  /* Light theme */
  --bg: #FBF6EF;
  --surface: #FFFFFF;
  --surface-2: #F4ECE1;
  --surface-sunken: #EFE5D8;
  --paper: #FFFDF9;
  --ink: #2B211C;
  --ink-2: #66554B;
  --ink-3: #76655A;
  --line: #E7DCCD;
  --primary: var(--clay-600);
  --primary-pressed: var(--clay-700);
  --on-primary: #FFFFFF;
  --primary-soft: var(--clay-100);
  --on-primary-soft: #7A3018;
  --accent: var(--sage-600);
  --accent-soft: var(--sage-100);
  --success: #2F7A4F;
  --danger: #B3261E;
  --warning-soft: var(--honey-100);
  --on-warning-soft: #6B4A06;
  --ruler: rgba(233, 180, 76, 0.34);
  --ruler-edge: #A9740F;   /* pages stay light in both themes: 4.0:1 on paper, 3.3:1 on the band */
  --track: #D9CBB8;        /* progress tracks */
  --swatch-ring: rgba(43, 33, 28, 0.22);
  --scrim: rgba(43, 33, 28, 0.42);
  --dim: rgba(43, 33, 28, 0.38);
  --glass: rgba(255, 253, 249, 0.82);

  /* Ruler palette (5 colors) */
  --ruler-honey: rgba(233, 180, 76, 0.34);
  --ruler-sage: rgba(90, 138, 112, 0.30);
  --ruler-sky: rgba(74, 134, 184, 0.28);
  --ruler-rose: rgba(217, 103, 125, 0.28);
  --ruler-plum: rgba(138, 90, 158, 0.28);

  /* Typography: system fonts in the app (SF Pro / Roboto). Inter stands in for previews. */
  --font: -apple-system, "SF Pro Text", "Inter", Roboto, system-ui, sans-serif;
  --font-display: -apple-system, "SF Pro Display", "Inter", Roboto, system-ui, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", "Nunito", "Inter", system-ui, sans-serif;
  --fs-large-title: 34px;  --lh-large-title: 41px;
  --fs-title-1: 28px;      --lh-title-1: 34px;
  --fs-title-2: 22px;      --lh-title-2: 28px;
  --fs-title-3: 20px;      --lh-title-3: 25px;
  --fs-headline: 17px;     --lh-headline: 22px;
  --fs-body: 17px;         --lh-body: 22px;
  --fs-callout: 16px;      --lh-callout: 21px;
  --fs-subhead: 15px;      --lh-subhead: 20px;
  --fs-footnote: 13px;     --lh-footnote: 18px;
  --fs-caption: 12px;      --lh-caption: 16px;
  --fs-counter-xl: 72px;   /* main row counter */
  --fs-counter-l: 44px;
  --fs-counter-m: 28px;

  /* Radii */
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 22px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Spacing (4pt grid) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* Elevation: soft, warm-tinted */
  --shadow-1: 0 1px 2px rgba(70, 40, 20, 0.06), 0 2px 8px rgba(70, 40, 20, 0.05);
  --shadow-2: 0 4px 12px rgba(70, 40, 20, 0.08), 0 12px 32px rgba(70, 40, 20, 0.08);
  --shadow-3: 0 10px 30px rgba(70, 40, 20, 0.14), 0 24px 60px rgba(70, 40, 20, 0.12);

  /* Touch */
  --tap-min: 44px;
  --tap-plus: 64px;

  /* Motion */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 360ms;
  --dur-hero: 600ms;
  --ease-standard: cubic-bezier(0.2, 0.75, 0.34, 0.94);
  --ease-settle: cubic-bezier(0, 0.65, 0.51, 0.99);
  --ease-travel: cubic-bezier(0.6, 0.05, 0.25, 1);
  --ease-exit: cubic-bezier(0.7, 0.02, 0.54, 0.42);
}


/* Accessibility size AX3 (mockups 11-ax, 21-ax): text styles at the iOS AX3 point sizes. */
/* Accessibility size AX3 (mockups 11-ax, 21-ax): text styles at approximately the iOS AX3 point sizes. */
[data-type="ax3"] {
  --fs-large-title: 60px;  --lh-large-title: 70px;
  --fs-title-1: 53px;      --lh-title-1: 62px;
  --fs-title-2: 48px;      --lh-title-2: 56px;
  --fs-title-3: 44px;      --lh-title-3: 52px;
  --fs-headline: 40px;     --lh-headline: 48px;
  --fs-body: 40px;         --lh-body: 48px;
  --fs-callout: 38px;      --lh-callout: 45px;
  --fs-subhead: 36px;      --lh-subhead: 43px;
  --fs-footnote: 33px;     --lh-footnote: 40px;
  --fs-caption: 32px;      --lh-caption: 38px;
}

[data-theme="dark"] {
  --bg: #17120F;
  --surface: #221B17;
  --surface-2: #2C231E;
  --surface-sunken: #120E0B;
  --paper: #EFE6DA;
  --ink: #F6EEE5;
  --ink-2: #C9B8AB;
  --ink-3: #A08E81;
  --line: #3A2F28;
  --primary: #F0885F;
  --primary-pressed: #F6A37F;
  --on-primary: #2A0F04;
  --primary-soft: #4A2717;
  --on-primary-soft: #FFD6C4;
  --accent: #8FC2A5;
  --accent-soft: #23372C;
  --success: #7FCB9C;
  --danger: #FFB4AB;
  --warning-soft: #3E3014;
  --on-warning-soft: #F7D98F;
  --ruler: rgba(244, 213, 141, 0.30);
  --ruler-edge: #A9740F;
  --track: #7D6A5D;
  --swatch-ring: rgba(246, 238, 229, 0.6);
  --scrim: rgba(0, 0, 0, 0.55);
  --dim: rgba(0, 0, 0, 0.45);
  --glass: rgba(34, 27, 23, 0.82);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17120F; --surface: #221B17; --surface-2: #2C231E; --surface-sunken: #120E0B;
    --paper: #EFE6DA; --ink: #F6EEE5; --ink-2: #C9B8AB; --ink-3: #A08E81; --line: #3A2F28;
    --primary: #F0885F; --primary-pressed: #F6A37F; --on-primary: #2A0F04;
    --primary-soft: #4A2717; --on-primary-soft: #FFD6C4; --accent: #8FC2A5; --accent-soft: #23372C;
    --success: #7FCB9C; --danger: #FFB4AB; --warning-soft: #3E3014; --on-warning-soft: #F7D98F;
    --ruler: rgba(244, 213, 141, 0.30); --ruler-edge: #A9740F; --track: #7D6A5D; --swatch-ring: rgba(246, 238, 229, 0.6);
    --scrim: rgba(0, 0, 0, 0.55); --dim: rgba(0, 0, 0, 0.45); --glass: rgba(34, 27, 23, 0.82);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 120ms; --dur-slow: 120ms; --dur-hero: 120ms; }
}