/* Quern website design tokens: THE one home of every colour, font, size, corner, shadow and timing on the site.
   Pages and components use these names only; a literal colour outside this file fails website/site.test.js.
   Source: the app's own tokens (app/lib/design/tokens/, motion/motion_tokens.dart; docs/website/Design Language.md)
   and the Midnight Mill design's dark and light boards, paired colour by colour.
   Themes: dark is the default ("Night"); light is [data-theme="light"] ("Mist"). The theme follows the system until the
   person picks one (assets/ds/site.js remembers it). */

:root {
  color-scheme: dark;

  /* ---- surfaces (dark: Night) ---- */
  --ground: #0C0E0D;            /* the page */
  --surface: #121413;           /* cards */
  --surface-2: #141716;         /* raised wells, orbs */
  --surface-3: #161917;         /* icon tiles */
  --surface-deep: #0F1110;      /* the foot of a lit panel */
  --glass: rgba(12, 14, 13, .72);      /* the sticky header */
  --glass-2: rgba(12, 14, 13, .6);
  --glass-3: rgba(12, 14, 13, .62);
  --frost: rgba(22, 25, 23, .45);      /* frosted cards over the glow */
  --frost-2: rgba(18, 21, 19, .5);
  --chip: rgba(24, 27, 25, .94);
  --bubble: #2B2E2B;            /* a chat bubble of the person's */
  --device-edge: #2A322F;       /* the phone frame */
  --device-edge-2: #0E1210;

  /* ---- ink ---- */
  --ink: #EDECE6;               /* body text */
  --ink-max: #FFFFFF;           /* hovered text */
  --ink-head: #F6F5F0;          /* the top of a heading's gradient */
  --ink-1: #E3E1D9;
  --ink-2: #CAC9C2;             /* secondary */
  --ink-2b: #C4C3BC;
  --ink-2c: #D9D7CF;
  --ink-3: #A6A69F;             /* lede, captions */
  --ink-3b: #A6AEAA;
  --ink-4: #8F8F88;             /* hints */
  --ink-4b: #8E8E87;

  /* rgb triplets, for alpha: rgb(var(--fg) / .07) */
  --fg: 255 255 255;            /* hairlines and washes: white in the dark, ink in the light */
  --ink-rgb: 237 236 230;
  --glow: 166 227 200;          /* the accent's light */
  --shade: 0 0 0;               /* shadows; --shade-k scales their strength per theme */
  --shade-k: 1;

  /* ---- the accent: Sage (one colour carries every live thing) ---- */
  --accent: #A6E3C8;            /* links, the primary button, the glow */
  --accent-2: #9FD8C4;          /* eyebrows */
  --on-accent: #0D261D;         /* text on the accent */
  --accent-soft: #1B3329;
  --on-accent-soft: #C6E9DC;

  /* ---- other accents and states (as in the app: reserved for their job) ---- */
  --ocean: #9CC7F0;
  --ocean-2: #9CC8E8;
  --ocean-soft: #1E2A33;
  --clay: #E5C98F;
  --clay-soft: #33261B;
  --plum: #E7B8F2;
  --plum-soft: #2A1B33;
  --warn: #F2C59E;

  /* ---- paper: the app's own light surfaces, the same in both themes (phone screens, note cards) ---- */
  --mist: #F7F7F4;
  --paper-sunk: #F1F0EA;
  --paper-line: #E3E6E4;
  --paper-ink: #141816;
  --paper-ink-2: #545B57;
  --paper-ink-rgb: 20 24 22;
  --paper-ink-flip: #141816;    /* paper text that turns white on the light board's dark chips */
  --paper-ink-flip-2: #141816;
  --primary: #17201D;           /* the app's primary button: a dark pill */
  --tip: #1C1F1D;

  /* ---- the brand: the quern's sage (constant) ---- */
  --sage-400: #5FA391;
  --sage-500: #3C8D76;
  --sage-600: #21705A;
  --sage-650: #2E6E5D;
  --sage-700: #185846;
  --sage-900: #123F33;
  --sage-ink: #1F473D;
  --sage-soft: #E1ECE7;
  --sage-text: #1F6B55;
  --sage-glow: 78 146 130;
  --sage-400-rgb: 95 163 145;
  --sage-600-rgb: 33 112 90;
  --sage-text-rgb: 31 107 85;
  --sage-mint-rgb: 120 200 170;
  --ink-light-rgb: 27 28 26;
  --ground-dark-rgb: 12 14 13;
  --surface-dark-rgb: 22 25 23;

  /* ---- one-off colours from the design's illustrations (each used in one drawing) ---- */
  --k-35-87-75: 35 87 75;       /* the hero's deep glow */
  --k-200-240-222: 200 240 222; /* the accretion disk's bright edge */
  --k-10-42-34: 10 42 34;       /* the event horizon */
  --k-130-170-200: 130 170 200; /* a cool atmosphere wash */
  --k-254-254-252: 254 254 252; /* frosted paper */
  --k-255-178-122: 255 178 122; /* "outside" in the trust pipeline */
  --k-167-211-195: 167 211 195;
  --k-6e6f69: #6E6F69;
  --k-0d0f0e: #0D0F0E;
  --k-efeee8: #EFEEE8;
  --k-e3ebe6: #E3EBE6;
  --k-cfe2ec: #CFE2EC;
  --k-ddebe4: #DDEBE4;
  --k-a7d3c3: #A7D3C3;          /* the orb's gradient (app: Sage AI glow) */
  --k-4e9282: #4E9282;
  --k-23574b: #23574B;
  --k-5a5b55: #5A5B55;
  --k-eeede7: #EEEDE7;
  --k-1b1c1a: #1B1C1A;
  --k-f5f4f0: #F5F4F0;
  --k-a6e3c8: #A6E3C8;
  --k-fbfaf7: #FBFAF7;
  --k-f6e6de: #F6E6DE;
  --k-c9c8c1: #C9C8C1;

  /* ---- type (the app's families; the web scale is larger) ---- */
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-display: 'Space Grotesk', 'Geist', system-ui, sans-serif;  /* the app's poster face */
  --font-hand: 'Caveat', cursive;                                   /* the app's hand face, for asides */
  --text-hero: clamp(48px, 8.6vw, 124px);
  --text-h2: clamp(38px, 5.2vw, 68px);
  --text-lede: clamp(17px, 1.5vw, 19px);
  --text-body: 16px;
  --text-small: 14px;
  --text-eyebrow: 12px;

  /* ---- space (the app's 4 px base) and layout ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --content: 1200px;
  --reading: 680px;
  --gutter: 32px;
  --gutter-phone: 20px;
  --section-space: 164px;      /* the gap under a page section (.section) */
  --section-space-sm: 160px;
  --section-space-lg: 200px;
  --header-h: 72px;

  /* ---- corners (the app's "Calm Paper") ---- */
  --radius-card: 28px;
  --radius-panel: 44px;
  --radius-tile: 20px;
  --radius-pill: 999px;

  /* ---- motion (the app's motion tokens) ---- */
  --dur-quick: 120ms;
  --dur-calm: 320ms;
  --dur-screen: 440ms;
  --dur-exit: 200ms;
  --ease-enter: cubic-bezier(.05, .7, .1, 1);
  --ease-exit: cubic-bezier(.3, 0, .8, .15);
  --dur-breath: 3.6s;
  --dur-drift: 18s;
  --press: .95;                 /* the app's press: scale .95, spring back */
  --dur-develop: 480ms;         /* the app's develop: blur 6 -> 0 and fade (calm, a little longer on the web's larger type) */
  --dur-cascade: 280ms;         /* the app's cascade: the first 5 items rise 12 px, 30 ms apart */
  --cascade-step: 30ms;

  /* ---- depth ---- */
  --z-header: 50;
  --z-menu: 60;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ground: #F5F4F0;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-3: #FFFFFF;
  --surface-deep: #FBFAF7;
  --glass: rgba(245, 244, 240, .8);
  --glass-2: rgba(255, 255, 255, .75);
  --glass-3: rgba(255, 255, 255, .8);
  --frost: rgba(255, 255, 255, .6);
  --frost-2: rgba(255, 255, 255, .62);
  --chip: #FFFFFF;
  --bubble: #EEEDE7;
  --device-edge: #E6E8E6;
  --device-edge-2: #CDD1CE;

  --ink: #1B1C1A;
  --ink-max: #111211;
  --ink-head: #1B1C1A;
  --ink-1: #3F403C;
  --ink-2: #383935;
  --ink-2b: #3A3B37;
  --ink-2c: #4A4B46;
  --ink-3: #53544F;
  --ink-3b: #6B6C66;
  --ink-4: #686963;
  --ink-4b: #6E6F69;

  --fg: 27 28 26;
  --ink-rgb: 27 28 26;
  --glow: 31 107 85;
  --shade: 27 28 26;
  --shade-k: .3;

  --accent: #1F6B55;
  --accent-2: #1E6B55;
  --on-accent: #FFFFFF;
  --accent-soft: #E1ECE7;
  --on-accent-soft: #1F473D;

  --ocean: #1F5FA8;
  --ocean-2: #1F6380;
  --ocean-soft: #DDEBF2;
  --clay: #8A5A12;
  --clay-soft: #F6EEDC;
  --plum: #7A4A86;
  --plum-soft: #F0E6F2;
  --warn: #93560A;

  --paper-ink-flip: #FFFFFF;
  --paper-ink-flip-2: #F5F4F0;
}