/* Type: Geist + Geist Mono (Jam · Type, DECISIONS #10). Loaded here so
   every page that uses the tokens gets the font — no <head> changes. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap');

/* ============================================================
   FOUNDATIONS — tokens   (documented in tokens.md)

   Shared by every jam, component and the prototype. Colour is Paper
   (DECISIONS #26, built on Cursor's method from #9) with a cobalt
   accent (#19) and brick errors (#17); type is Geist + Geist Mono
   (#10). The primary action is the text colour, near-black in light
   and near-white in dark.

   Theme is a data-theme attribute on <html>, set by theme.js (URL,
   host page, or OS). Any element can also carry data-theme to
   force a theme on just that subtree (e.g. light and dark specimens
   side by side on one page).
   ============================================================ */

:root, [data-theme="light"] {
  color-scheme: light;

  /* Colour is "Paper" (DECISIONS #26): white canvas and cards on one pale,
     warm page tone, warm near-black text. Borders and secondary text are
     the text colour at a percentage (Cursor's method; the shared block at
     the end). Cursor's own greys are kept in palettes.css as the direction
     not taken. Rules: at most two surface levels in view; separate with a
     border + shadow, not another grey; grey fills only where they mean
     something (hover, selected, a chip, a file card). */

  /* Surfaces */
  --bg:             #FFFFFF;   /* the chat and panel canvas */
  --surface:        #F4F3EF;   /* the page, sidebar, quiet fills */
  --surface-sunken: #F7F6F3;   /* recessed */
  --surface-hover:  #F1F0EB;   /* a fill under the pointer */
  --surface-raised: #FFFFFF;   /* composer, cards, menus: lifted by border + shadow */

  /* Text */
  --text:           #1F1E1A;   /* warm near-black, softer than pure black on white */

  /* Accent — a value, not a hue: the primary button is the text colour */
  --accent:         #1F1E1A;
  --accent-hover:   #37362F;
  --accent-fg:      #FFFFFF;

  /* Highlight — cobalt (DECISIONS #19): "this needs you". Rare: the New
     line, a mention of you, an agent stopped on a ?. The only cool colour
     in a warm UI, and owned by no model. (Was Cursor's orange, which read
     as Claude's.) */
  --highlight:      #2F5BEA;   /* 5.1:1 on --bg; white on it 5.5:1 */
  --highlight-fg:   #FFFFFF;   /* text on a highlight fill */

  /* Status */
  --success:        #1A7A58;   /* 5.3:1 on --bg (was #1F8A65, 4.3:1: under AA as text) */
  --danger:         #B83A2E;   /* brick (DECISIONS #17): 5.3:1 as text, 5.7:1 under white */

  /* Depth — Cursor leans on borders, not shadows; these stay quiet */
  --scrim:           rgba(38,37,30,.28);
  --shadow-raise:    0 1px 2px rgba(31,30,26,.05), 0 6px 18px -8px rgba(31,30,26,.12);
  --shadow-raise-hi: 0 2px 4px rgba(38,37,30,.05), 0 10px 24px -10px rgba(38,37,30,.16);
  --shadow-menu:     0 8px 28px rgba(38,37,30,.10);
  --shadow-pop:      0 16px 40px rgba(38,37,30,.14);

  /* People (DECISIONS #29) — a fill + an ink per person, for anyone without a photo.
     Every ink passes AA on its fill (6.3–7.3:1 light, 8.1–9.1:1 dark); a hairline ring in
     the same hue keeps the circle's edge visible on white (basics.css). Identity is carried
     by the initials, never by colour alone. */
  --p1: #F8D3DD; --p1-ink: #8C1D40;   /* Alex   · rose   6.5:1 */
  --p2: #CFE3F6; --p2-ink: #18507F;   /* Jordan · sky    6.4:1 */
  --p3: #E4DBF7; --p3-ink: #4F2F91;   /* Priya  · lilac  7.3:1 */
  --p4: #CDEBDC; --p4-ink: #155C3E;   /* Sam    · mint   6.3:1 */
  --p5: #F7E3A6; --p5-ink: #6A4B00;   /* Leo    · butter 6.3:1 */

  /* Agents — the only saturated colour in the product. Agents are
     the new thing on screen, so they get the colour; people stay
     calm. One hue per template. */
  --a-slides:   #F0764F;
  --a-research: #7B6CF6;
  --a-docs:     #1FA38F;

  /* ---------- Scales (theme-agnostic) ---------- */
  --font-ui: 'Geist', ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* One step up from Cursor's IDE scale (#36): Syllable is read by marketing and sales teams, not in
     an editor. Messages 15, UI 14, meta 13. The old scale is html[data-type="compact"] in palettes.css. */
  --font-2xs: 12px;
  --font-xs:  13px;
  --font-sm:  14px;
  --font-base:15px;
  --font-lg:  17px;
  --font-xl:  20px;
  --font-2xl: 28px;

  --weight-normal: 400;
  --weight-medium: 500;   /* Cursor-style: 400 does most of the work; 500 for names + active */
  --weight-strong: 600;
  /* Labels are sentence case (DECISIONS #11): 12px · 500 · muted. No uppercase tracking token. */

  --space-2xs: 4px;  --space-xs: 6px;  --space-sm: 8px;
  --space-md: 12px;  --space-lg: 16px; --space-xl: 24px;
  --space-2xl: 32px; --space-3xl: 48px;

  --radius-sm: 6px;  --radius-md: 8px;  --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 999px;

  --motion-instant: .09s;
  --motion-fast:    .16s;
  --motion-base:    .26s;
  --motion-slow:    .5s;
  --motion-layout:  .28s;   /* the shell's columns (nav open/close), and whatever must move with them */
  --ease:           cubic-bezier(.32,.72,0,1);    /* settle */
  --ease-spring:    cubic-bezier(.34,1.56,.64,1); /* a little overshoot, for arrivals */
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:             #1A1A18;   /* canvas (Paper, dark): one step above the page */
  --surface:        #121210;   /* the page, sidebar */
  --surface-sunken: #161614;
  --surface-hover:  #2A2A27;
  --surface-raised: #232321;   /* composer, cards, menus: lighter = higher */

  --text:           #EEEDEA;

  --accent:         #EEEDEA;
  --accent-hover:   #D7D6D2;
  --accent-fg:      #121210;

  --highlight:      #6195FF;   /* cobalt, lifted for dark and nudged off violet: 6.1:1 */
  --highlight-fg:   #14120B;

  --success:        #5CC29A;   /* Cursor's dark-mode green */
  --danger:         #E0665A;   /* brick, lifted for dark: 5.2:1 as text */

  --scrim:           rgba(0,0,0,.55);
  /* Dark depth: the page's warm near-black, not pure black; wide and faint, so a shadow reads as lift, not a
     hole. Same order as light: raise < raise-hi < menu < pop. */
  --shadow-raise:    0 1px 2px rgba(10,9,6,.16), 0 12px 32px -14px rgba(10,9,6,.30);
  --shadow-raise-hi: 0 2px 6px rgba(10,9,6,.18), 0 18px 44px -16px rgba(10,9,6,.36);
  --shadow-menu:     0 12px 36px rgba(10,9,6,.34);
  --shadow-pop:      0 18px 48px rgba(10,9,6,.40);

  /* People: the same hues, sunk into the dark ground (8.1–9.1:1) */
  --p1: #5A2336; --p1-ink: #FFD0DC;
  --p2: #1E3E5E; --p2-ink: #CFE6FF;
  --p3: #3A2C63; --p3-ink: #E4D9FF;
  --p4: #1D4A37; --p4-ink: #C8F0DC;
  --p5: #4D3C0C; --p5-ink: #F7E3A6;

  --a-slides:   #FF8A63;
  --a-research: #9487FF;
  --a-docs:     #3CC2AC;
}

/* ============================================================
   Derived from --text, in BOTH themes (Cursor's method: lines and
   secondary text are the text colour at a percentage, so they sit
   right on any surface). Declared on every themed element so each
   resolves against that element's own --text.
   ============================================================ */
:root, [data-theme="light"], [data-theme="dark"] {
  /* Secondary text: Cursor uses 60% (≈4:1 in light — under AA for
     small text). Raised to 66%: measured 4.8:1 on --surface and
     4.9:1 on --bg in light, 7:1+ in dark. */
  --text-muted:     color-mix(in oklab, var(--text) 66%, transparent);
  --text-faint:     color-mix(in oklab, var(--text) 45%, transparent);   /* disabled and decorative icons only: 2.8:1, so never
                                                                           text you need to read (placeholders, hints, counts, times use --text-muted) */

  --border-subtle:  color-mix(in oklab, var(--text) 5%,  transparent);
  --border:         color-mix(in oklab, var(--text) 10%, transparent);
  --border-strong:  color-mix(in oklab, var(--text) 20%, transparent);

  --border-focus:   color-mix(in oklab, var(--text) 30%, transparent);   /* a field with the caret in it */

  --hover:          color-mix(in oklab, var(--text) 5%,  transparent);
  --selected:       color-mix(in oklab, var(--text) 8%,  transparent);
  --ring-selected:  0 0 0 3px color-mix(in oklab, var(--text) 8%, transparent);   /* the card that's open or picked */

  /* An agent at work: the grey dot (nav, Sessions, the header's stack). Cobalt stays "your move" (#19). */
  --working:        color-mix(in oklab, var(--text) 55%, transparent);
}