/* ══════════════════════════════════════════════════════════════
   Warm minimal — design tokens
   Every colour the app uses is a token here; dark mode redefines
   the same names (html[data-theme="dark"], set by src/core/theme.js).
   The older names (--bg, --text, --blue, …) are kept as aliases so
   screens not yet redesigned follow the theme too.
   ══════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Lexend'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/lexend-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lexend'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/lexend-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url('../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url('../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --paper: #FAF6EF;  --surface: #FFFFFF;  --surface-2: #F4EFE6;  --surface-3: #EBE4D8;
  --overlay: rgba(31, 27, 22, .42);
  --logo-tile: #FFFFFF;  /* the logo is drawn for white, in both themes */
  --ink: #1F1B16;  --ink-2: #4A433A;  --muted: #776D60;
  --line: #E6DED1;  --line-strong: #CDBFAC;
  --accent: #C4532D;  --accent-hover: #A9441F;  --on-accent: #FFFFFF;  --accent-soft: #FBE4D9;  --accent-ink: #8A3517;
  --sky: #DCEAF8;    --sky-ink: #1E4E80;    --sky-line: #A3C4E8;
  --blush: #F8DDE7;  --blush-ink: #8A2E52;  --blush-line: #E6A7BF;
  --sage: #DDEFE1;   --sage-ink: #22633A;   --sage-line: #A5D2B1;
  --butter: #FBEFC7; --butter-ink: #745405; --butter-line: #E7CF7E;
  --rose: #F9DFDB;   --rose-ink: #A3302A;   --rose-line: #E9A69F;
  --lilac: #ECE4F8;  --lilac-ink: #5B3E99;  --lilac-line: #C6B5EA;
  --peach: #FCE7D6;  --peach-ink: #8C4A14;  --peach-line: #EDBB91;
  --mint: #D9F0EA;   --mint-ink: #1D5E52;   --mint-line: #9DD0C2;
  --shadow-soft: 0 1px 2px rgba(31,27,22,.06), 0 8px 24px rgba(31,27,22,.08);
  --shadow-float: 0 2px 6px rgba(31,27,22,.08), 0 18px 48px rgba(31,27,22,.16);
  --press-color: var(--ink);

  --font-display: 'Bricolage Grotesque', 'Lexend', 'Segoe UI', system-ui, sans-serif;
  --font-ui: 'Lexend', 'Segoe UI', system-ui, sans-serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 480ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --stagger: 28ms;

  /* Strong role colours (text, icons, bars) */
  --green: #2E7D4E;  --red: #B93A30;  --orange: #C2621F;  --yellow: #9A7209;
  --purple: #6E4FB0; --teal: #23756B; --cyan: #2A7395;    --pink: #A63A64;

  /* Older names, now aliases of the tokens above */
  --bg: var(--paper);  --surface2: var(--surface-2);  --border: var(--line);
  --text: var(--ink);  --text-muted: var(--muted);
  --blue: var(--accent);  --blue-light: var(--accent-soft);  --pink-light: var(--blush);
  --shadow: 0 1px 2px rgba(31,27,22,.05);  --shadow-lg: var(--shadow-float);
  --radius: 14px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #16130F;  --surface: #1F1B16;  --surface-2: #27221B;  --surface-3: #322B22;
  --overlay: rgba(0, 0, 0, .58);
  --ink: #F2ECE2;  --ink-2: #D0C7B9;  --muted: #A3988A;
  --line: #383128;  --line-strong: #52483A;
  --accent: #EE7B52;  --accent-hover: #F4936F;  --on-accent: #1F1B16;  --accent-soft: #3B2419;  --accent-ink: #F7B89C;
  --sky: #1C2C3D;    --sky-ink: #B9D6F4;    --sky-line: #35587C;
  --blush: #392029;  --blush-ink: #F2BBCF;  --blush-line: #7B4259;
  --sage: #1B3023;   --sage-ink: #A9DDB8;   --sage-line: #3D6B4A;
  --butter: #362C12; --butter-ink: #F0D68E; --butter-line: #7A6224;
  --rose: #3B1F1C;   --rose-ink: #F4AFA8;   --rose-line: #7D3B35;
  --lilac: #2B2340;  --lilac-ink: #CFC0F3;  --lilac-line: #5A4A86;
  --peach: #3A2616;  --peach-ink: #F5C49B;  --peach-line: #7E5130;
  --mint: #16302B;   --mint-ink: #9FDDCD;   --mint-line: #36675C;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-float: 0 2px 6px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.55);
  --press-color: #000000;
  --green: #7FCB98;  --red: #F08A80;  --orange: #F2A065;  --yellow: #E6C35C;
  --purple: #B9A2EE; --teal: #74CDBF; --cyan: #84C3E2;    --pink: #EE9BBC;
  --shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* Reduced motion — the OS setting, or Settings › Motion in the app */
:root[data-motion="reduced"] { --stagger: 0ms; --ease-spring: var(--ease-out); }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) { --stagger: 0ms; --ease-spring: var(--ease-out); } }