/* Grove Design System tokens — vendored from the Grove design-system project
   (grove-design-system d0cb7d07). Typography, colors (all ten themes), spacing,
   radii, elevation, motion, and the base focus ring, concatenated in the same
   order styles.css imports them. Fonts load via <link> in index.html instead of
   an @import. Edit upstream in the design system, then re-vendor. */

/* ============================================================
   Typography
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-prose: 'Newsreader', Georgia, 'Times New Roman', serif;
  /* UI chrome uses the platform font — this IS the native-Mac choice.
     No webfont is shipped for UI; -apple-system resolves to SF on macOS. */
  --font-ui: -apple-system, BlinkMacSystemFont, system-ui, 'Helvetica Neue', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* ---- Type scale (px) ---- */
  --text-xs:      11px;   /* metadata, git labels, kbd */
  --text-sm:      12px;   /* secondary UI, captions */
  --text-ui:      13px;   /* base UI text — matches macOS control text */
  --text-base:    14px;   /* dense body / list rows */
  --text-prose:   18px;   /* editor prose default */
  --text-lg:      20px;   /* lead prose, small headings */
  --text-h3:      21px;
  --text-h2:      26px;
  --text-h1:      32px;
  --text-2xl:     40px;   /* marketing sub-display */
  --text-3xl:     56px;
  --text-display: 76px;   /* marketing hero */

  /* ---- Line height ---- */
  --leading-tight:  1.12;  /* display headings */
  --leading-snug:   1.3;   /* UI, headings */
  --leading-ui:     1.4;
  --leading-prose:  1.75;  /* editor reading rhythm */

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Tracking ---- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;

  /* ---- Measure (line length) ---- */
  --measure: 68ch;
  --measure-narrow: 52ch;
}

/* ============================================================
   Colors — PAPER (light · default) ↔ Ink
   ============================================================ */
:root,
[data-theme="paper"],
[data-theme="light"] {
  --paper:#FAF7F0; --paper-2:#F2EDE2; --paper-3:#EAE3D5; --paper-raised:#FFFFFF;
  --ink:#24211C; --ink-2:#4F4A40; --ink-3:#8A8375; --ink-4:#B6AE9E;
  --line:#E5DECF; --line-strong:#D4C9B4;
  --grove:#3E6B4F; --grove-hover:#345C43; --grove-press:#2B4E39; --grove-soft:#E7EFE7; --grove-text:#2F5A3F;

  --git-modified:#C08A2E; --git-added:#4E8C5A; --git-untracked:#6E8FA8; --git-deleted:#B4553F; --git-renamed:#8A6DAE;
  --agent:#3E6B4F; --agent-glow:rgba(62,107,79,0.16); --agent-line:rgba(62,107,79,0.09);
  --diff-add-wash:color-mix(in oklab, var(--git-added) 16%, transparent);
  --diff-del-wash:color-mix(in oklab, var(--git-deleted) 14%, transparent);
  --diff-sweep:color-mix(in oklab, var(--accent) 22%, transparent);

  --surface-app:var(--paper); --surface-sidebar:var(--paper-2); --surface-editor:var(--paper); --surface-terminal:#F4EFE4;
  --surface-card:var(--paper-raised); --surface-popover:var(--paper-raised); --surface-well:var(--paper-3); --surface-selected:var(--grove-soft);
  --surface-hover:rgba(36,33,28,0.045); --surface-active:rgba(36,33,28,0.075);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-tertiary:var(--ink-3); --text-faint:var(--ink-4); --text-on-accent:#FBFAF6;
  --border-hairline:var(--line); --border-default:var(--line-strong); --border-strong:#C3B8A1;
  --accent:var(--grove); --accent-hover:var(--grove-hover); --accent-press:var(--grove-press); --accent-soft:var(--grove-soft); --accent-text:var(--grove-text);
  --link:var(--grove-text); --link-hover:var(--grove-press); --link-unresolved:var(--ink-4);
  --selection:rgba(62,107,79,0.18); --focus-ring:rgba(62,107,79,0.45);
  --material-sidebar:color-mix(in srgb, var(--surface-sidebar) 72%, transparent);
  --material-popover:color-mix(in srgb, var(--surface-popover) 84%, transparent);
}

[data-theme="dark"],
[data-theme="ink"] {
  --paper:#131210; --paper-2:#0C0B09; --paper-3:#1E1C17; --paper-raised:#211F18;
  --ink:#F4EFE4; --ink-2:#BDB5A4; --ink-3:#847C6D; --ink-4:#585245;
  --line:#2A2822; --line-strong:#3A3830;
  --grove:#8CC29E; --grove-hover:#9CD0AD; --grove-press:#7BB08D; --grove-soft:rgba(140,194,158,0.17); --grove-text:#9FD0AE;

  --git-modified:#D6A94E; --git-added:#74B584; --git-untracked:#8FAAC2; --git-deleted:#D07A62; --git-renamed:#A98FC9;
  --agent:#8CC29E; --agent-glow:rgba(140,194,158,0.24); --agent-line:rgba(140,194,158,0.10);
  --diff-add-wash:color-mix(in oklab, var(--git-added) 18%, transparent);
  --diff-del-wash:color-mix(in oklab, var(--git-deleted) 16%, transparent);
  --diff-sweep:color-mix(in oklab, var(--accent) 26%, transparent);

  --surface-app:var(--paper); --surface-sidebar:var(--paper-2); --surface-editor:var(--paper); --surface-terminal:#0A0906;
  --surface-card:var(--paper-raised); --surface-popover:#242219; --surface-well:var(--paper-3); --surface-selected:var(--grove-soft);
  --surface-hover:rgba(244,239,228,0.06); --surface-active:rgba(244,239,228,0.10);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-tertiary:var(--ink-3); --text-faint:var(--ink-4); --text-on-accent:#0C140F;
  --border-hairline:var(--line); --border-default:var(--line-strong); --border-strong:#4A473C;
  --accent:var(--grove); --accent-hover:var(--grove-hover); --accent-press:var(--grove-press); --accent-soft:var(--grove-soft); --accent-text:var(--grove-text);
  --link:var(--grove-text); --link-hover:var(--grove); --link-unresolved:var(--ink-4);
  --selection:rgba(140,194,158,0.22); --focus-ring:rgba(140,194,158,0.55);
  --material-sidebar:color-mix(in srgb, var(--surface-sidebar) 68%, transparent);
  --material-popover:color-mix(in srgb, var(--surface-popover) 80%, transparent);
}

/* ============================================================
   LINEN ↔ Harbor (Ethan Schoonover)
   ============================================================ */
[data-theme="linen"] {
  --paper:#FDF6E3; --paper-2:#F4ECD3; --paper-3:#EEE8D5; --paper-raised:#FFFCF2;
  --ink:#33403B; --ink-2:#586E75; --ink-3:#839496; --ink-4:#A6B2AB;
  --line:#E7DCBC; --line-strong:#D7CBA6;
  --grove:#5A7A00; --grove-hover:#506D00; --grove-press:#476000; --grove-soft:#EBEBC8; --grove-text:#5B7300;

  --git-modified:#B58900; --git-added:#859900; --git-untracked:#268BD2; --git-deleted:#DC322F; --git-renamed:#6C71C4;
  --agent:#6B8E00; --agent-glow:rgba(107,142,0,0.18); --agent-line:rgba(107,142,0,0.09);
  --diff-add-wash:color-mix(in oklab, var(--git-added) 16%, transparent);
  --diff-del-wash:color-mix(in oklab, var(--git-deleted) 14%, transparent);
  --diff-sweep:color-mix(in oklab, var(--accent) 22%, transparent);

  --surface-app:var(--paper); --surface-sidebar:var(--paper-2); --surface-editor:var(--paper); --surface-terminal:#F7F0DC;
  --surface-card:var(--paper-raised); --surface-popover:var(--paper-raised); --surface-well:var(--paper-3); --surface-selected:var(--grove-soft);
  --surface-hover:rgba(51,64,59,0.05); --surface-active:rgba(51,64,59,0.08);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-tertiary:var(--ink-3); --text-faint:var(--ink-4); --text-on-accent:#FDF6E3;
  --border-hairline:var(--line); --border-default:var(--line-strong); --border-strong:#C8BC97;
  --accent:var(--grove); --accent-hover:var(--grove-hover); --accent-press:var(--grove-press); --accent-soft:var(--grove-soft); --accent-text:var(--grove-text);
  --link:var(--grove-text); --link-hover:var(--grove-press); --link-unresolved:var(--ink-4);
  --selection:rgba(107,142,0,0.18); --focus-ring:rgba(107,142,0,0.45);
  --material-sidebar:color-mix(in srgb, var(--surface-sidebar) 72%, transparent);
  --material-popover:color-mix(in srgb, var(--surface-popover) 84%, transparent);
}

[data-theme="harbor"] {
  --paper:#002B36; --paper-2:#00252E; --paper-3:#073642; --paper-raised:#083E4B;
  --ink:#A6B2B2; --ink-2:#8A9C9C; --ink-3:#6C8080; --ink-4:#566E75;
  --line:#0E4451; --line-strong:#155464;
  --grove:#859900; --grove-hover:#93A80D; --grove-press:#6E8000; --grove-soft:rgba(133,153,0,0.18); --grove-text:#A0B500;

  --git-modified:#B58900; --git-added:#859900; --git-untracked:#268BD2; --git-deleted:#DC322F; --git-renamed:#6C71C4;
  --agent:#859900; --agent-glow:rgba(133,153,0,0.24); --agent-line:rgba(133,153,0,0.11);
  --diff-add-wash:color-mix(in oklab, var(--git-added) 18%, transparent);
  --diff-del-wash:color-mix(in oklab, var(--git-deleted) 16%, transparent);
  --diff-sweep:color-mix(in oklab, var(--accent) 26%, transparent);

  --surface-app:var(--paper); --surface-sidebar:var(--paper-2); --surface-editor:var(--paper); --surface-terminal:#00212B;
  --surface-card:var(--paper-raised); --surface-popover:#0A4150; --surface-well:var(--paper-3); --surface-selected:var(--grove-soft);
  --surface-hover:rgba(166,178,178,0.07); --surface-active:rgba(166,178,178,0.11);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-tertiary:var(--ink-3); --text-faint:var(--ink-4); --text-on-accent:#002B36;
  --border-hairline:var(--line); --border-default:var(--line-strong); --border-strong:#1E6070;
  --accent:var(--grove); --accent-hover:var(--grove-hover); --accent-press:var(--grove-press); --accent-soft:var(--grove-soft); --accent-text:var(--grove-text);
  --link:#2AA198; --link-hover:#38B5AB; --link-unresolved:var(--ink-4);
  --selection:rgba(133,153,0,0.20); --focus-ring:rgba(38,139,210,0.5);
  --material-sidebar:color-mix(in srgb, var(--surface-sidebar) 68%, transparent);
  --material-popover:color-mix(in srgb, var(--surface-popover) 80%, transparent);
}

/* ============================================================
   CHALK ↔ Ember (Ike Ku)
   ============================================================ */
[data-theme="chalk"] {
  --paper:#FCFCFC; --paper-2:#F3F4F5; --paper-3:#ECEDEF; --paper-raised:#FFFFFF;
  --ink:#3B3E44; --ink-2:#5C6166; --ink-3:#8A8F98; --ink-4:#ABB0B6;
  --line:#E7E8EA; --line-strong:#D6D8DB;
  --grove:#E68A2E; --grove-hover:#D97D20; --grove-press:#C66E14; --grove-soft:#FBEAD5; --grove-text:#A15A0A;

  --git-modified:#F2AE49; --git-added:#6CBF43; --git-untracked:#399EE6; --git-deleted:#F07171; --git-renamed:#A37ACC;
  --agent:#E68A2E; --agent-glow:rgba(230,138,46,0.18); --agent-line:rgba(230,138,46,0.09);
  --diff-add-wash:color-mix(in oklab, var(--git-added) 16%, transparent);
  --diff-del-wash:color-mix(in oklab, var(--git-deleted) 14%, transparent);
  --diff-sweep:color-mix(in oklab, var(--accent) 20%, transparent);

  --surface-app:var(--paper); --surface-sidebar:var(--paper-2); --surface-editor:var(--paper); --surface-terminal:#F3F4F5;
  --surface-card:var(--paper-raised); --surface-popover:var(--paper-raised); --surface-well:var(--paper-3); --surface-selected:var(--grove-soft);
  --surface-hover:rgba(59,62,68,0.05); --surface-active:rgba(59,62,68,0.08);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-tertiary:var(--ink-3); --text-faint:var(--ink-4); --text-on-accent:#33260A;
  --border-hairline:var(--line); --border-default:var(--line-strong); --border-strong:#C7C9CD;
  --accent:var(--grove); --accent-hover:var(--grove-hover); --accent-press:var(--grove-press); --accent-soft:var(--grove-soft); --accent-text:var(--grove-text);
  --link:var(--grove-text); --link-hover:var(--grove-press); --link-unresolved:var(--ink-4);
  --selection:rgba(230,138,46,0.16); --focus-ring:rgba(230,138,46,0.5);
  --material-sidebar:color-mix(in srgb, var(--surface-sidebar) 72%, transparent);
  --material-popover:color-mix(in srgb, var(--surface-popover) 84%, transparent);
}

[data-theme="ember"] {
  --paper:#242936; --paper-2:#1F2430; --paper-3:#2B303C; --paper-raised:#2D3341;
  --ink:#CCCAC2; --ink-2:#9EA3AD; --ink-3:#6C7689; --ink-4:#4E5666;
  --line:#323945; --line-strong:#3E4652;
  --grove:#FFCC66; --grove-hover:#FFD580; --grove-press:#F5BE4D; --grove-soft:rgba(255,204,102,0.16); --grove-text:#FFCC66;

  --git-modified:#FFCC66; --git-added:#87D96C; --git-untracked:#73D0FF; --git-deleted:#F27983; --git-renamed:#DFBFFF;
  --agent:#FFCC66; --agent-glow:rgba(255,204,102,0.22); --agent-line:rgba(255,204,102,0.11);
  --diff-add-wash:color-mix(in oklab, var(--git-added) 18%, transparent);
  --diff-del-wash:color-mix(in oklab, var(--git-deleted) 16%, transparent);
  --diff-sweep:color-mix(in oklab, var(--accent) 24%, transparent);

  --surface-app:var(--paper); --surface-sidebar:var(--paper-2); --surface-editor:var(--paper); --surface-terminal:#1A1F29;
  --surface-card:var(--paper-raised); --surface-popover:#2F3543; --surface-well:var(--paper-3); --surface-selected:var(--grove-soft);
  --surface-hover:rgba(204,202,194,0.06); --surface-active:rgba(204,202,194,0.10);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-tertiary:var(--ink-3); --text-faint:var(--ink-4); --text-on-accent:#242936;
  --border-hairline:var(--line); --border-default:var(--line-strong); --border-strong:#4C5464;
  --accent:var(--grove); --accent-hover:var(--grove-hover); --accent-press:var(--grove-press); --accent-soft:var(--grove-soft); --accent-text:var(--grove-text);
  --link:#73D0FF; --link-hover:#8CD9FF; --link-unresolved:var(--ink-4);
  --selection:rgba(255,204,102,0.16); --focus-ring:rgba(255,204,102,0.5);
  --material-sidebar:color-mix(in srgb, var(--surface-sidebar) 68%, transparent);
  --material-popover:color-mix(in srgb, var(--surface-popover) 80%, transparent);
}

/* ============================================================
   HEATHER ↔ Twilight
   ============================================================ */
[data-theme="heather"] {
  --paper:#FAF4ED; --paper-2:#F5EDE4; --paper-3:#F2E9E1; --paper-raised:#FFFAF3;
  --ink:#575279; --ink-2:#6D6A85; --ink-3:#9893A5; --ink-4:#B7B2C4;
  --line:#E9E0D5; --line-strong:#DBCEBF;
  --grove:#286983; --grove-hover:#215870; --grove-press:#1B4A5F; --grove-soft:#DEE9EC; --grove-text:#255F76;

  --git-modified:#EA9D34; --git-added:#56949F; --git-untracked:#286983; --git-deleted:#B4637A; --git-renamed:#907AA9;
  --agent:#286983; --agent-glow:rgba(40,105,131,0.16); --agent-line:rgba(40,105,131,0.09);
  --diff-add-wash:color-mix(in oklab, var(--git-added) 16%, transparent);
  --diff-del-wash:color-mix(in oklab, var(--git-deleted) 14%, transparent);
  --diff-sweep:color-mix(in oklab, var(--accent) 20%, transparent);

  --surface-app:var(--paper); --surface-sidebar:var(--paper-2); --surface-editor:var(--paper); --surface-terminal:#F3EADF;
  --surface-card:var(--paper-raised); --surface-popover:var(--paper-raised); --surface-well:var(--paper-3); --surface-selected:var(--grove-soft);
  --surface-hover:rgba(87,82,121,0.05); --surface-active:rgba(87,82,121,0.08);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-tertiary:var(--ink-3); --text-faint:var(--ink-4); --text-on-accent:#FAF4ED;
  --border-hairline:var(--line); --border-default:var(--line-strong); --border-strong:#CFC1B1;
  --accent:var(--grove); --accent-hover:var(--grove-hover); --accent-press:var(--grove-press); --accent-soft:var(--grove-soft); --accent-text:var(--grove-text);
  --link:var(--grove-text); --link-hover:var(--grove-press); --link-unresolved:var(--ink-4);
  --selection:rgba(40,105,131,0.16); --focus-ring:rgba(40,105,131,0.45);
  --material-sidebar:color-mix(in srgb, var(--surface-sidebar) 72%, transparent);
  --material-popover:color-mix(in srgb, var(--surface-popover) 84%, transparent);
}

[data-theme="twilight"] {
  --paper:#191724; --paper-2:#16141F; --paper-3:#26233A; --paper-raised:#1F1D2E;
  --ink:#E0DEF4; --ink-2:#B5B2CC; --ink-3:#908CAA; --ink-4:#6E6A86;
  --line:#26233A; --line-strong:#302D45;
  --grove:#9CCFD8; --grove-hover:#ADD9E1; --grove-press:#88BFC9; --grove-soft:rgba(156,207,216,0.16); --grove-text:#9CCFD8;

  --git-modified:#F6C177; --git-added:#9CCFD8; --git-untracked:#31748F; --git-deleted:#EB6F92; --git-renamed:#C4A7E7;
  --agent:#9CCFD8; --agent-glow:rgba(156,207,216,0.22); --agent-line:rgba(156,207,216,0.11);
  --diff-add-wash:color-mix(in oklab, var(--git-added) 18%, transparent);
  --diff-del-wash:color-mix(in oklab, var(--git-deleted) 16%, transparent);
  --diff-sweep:color-mix(in oklab, var(--accent) 24%, transparent);

  --surface-app:var(--paper); --surface-sidebar:var(--paper-2); --surface-editor:var(--paper); --surface-terminal:#14121D;
  --surface-card:var(--paper-raised); --surface-popover:#232135; --surface-well:var(--paper-3); --surface-selected:var(--grove-soft);
  --surface-hover:rgba(224,222,244,0.06); --surface-active:rgba(224,222,244,0.10);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-tertiary:var(--ink-3); --text-faint:var(--ink-4); --text-on-accent:#191724;
  --border-hairline:var(--line); --border-default:var(--line-strong); --border-strong:#3E3A55;
  --accent:var(--grove); --accent-hover:var(--grove-hover); --accent-press:var(--grove-press); --accent-soft:var(--grove-soft); --accent-text:var(--grove-text);
  --link:#C4A7E7; --link-hover:#D2BBEE; --link-unresolved:var(--ink-4);
  --selection:rgba(156,207,216,0.16); --focus-ring:rgba(196,167,231,0.5);
  --material-sidebar:color-mix(in srgb, var(--surface-sidebar) 68%, transparent);
  --material-popover:color-mix(in srgb, var(--surface-popover) 80%, transparent);
}

/* ============================================================
   CANOPY (Everforest palette · dark only)
   ============================================================ */
[data-theme="canopy"] {
  --paper:#2D353B; --paper-2:#272E33; --paper-3:#343F44; --paper-raised:#343F44;
  --ink:#D3C6AA; --ink-2:#9DA9A0; --ink-3:#859289; --ink-4:#5C6A72;
  --line:#3D484D; --line-strong:#4C555B;
  --grove:#A7C080; --grove-hover:#B4CC90; --grove-press:#96B070; --grove-soft:rgba(167,192,128,0.17); --grove-text:#A7C080;

  --git-modified:#DBBC7F; --git-added:#A7C080; --git-untracked:#7FBBB3; --git-deleted:#E67E80; --git-renamed:#D699B6;
  --agent:#A7C080; --agent-glow:rgba(167,192,128,0.22); --agent-line:rgba(167,192,128,0.11);
  --diff-add-wash:color-mix(in oklab, var(--git-added) 18%, transparent);
  --diff-del-wash:color-mix(in oklab, var(--git-deleted) 16%, transparent);
  --diff-sweep:color-mix(in oklab, var(--accent) 24%, transparent);

  --surface-app:var(--paper); --surface-sidebar:var(--paper-2); --surface-editor:var(--paper); --surface-terminal:#272E33;
  --surface-card:var(--paper-raised); --surface-popover:#3A464B; --surface-well:#343F44; --surface-selected:var(--grove-soft);
  --surface-hover:rgba(211,198,170,0.06); --surface-active:rgba(211,198,170,0.10);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-tertiary:var(--ink-3); --text-faint:var(--ink-4); --text-on-accent:#2D353B;
  --border-hairline:var(--line); --border-default:var(--line-strong); --border-strong:#56616A;
  --accent:var(--grove); --accent-hover:var(--grove-hover); --accent-press:var(--grove-press); --accent-soft:var(--grove-soft); --accent-text:var(--grove-text);
  --link:#83C092; --link-hover:#A7C080; --link-unresolved:var(--ink-4);
  --selection:rgba(167,192,128,0.20); --focus-ring:rgba(167,192,128,0.5);
  --material-sidebar:color-mix(in srgb, var(--surface-sidebar) 68%, transparent);
  --material-popover:color-mix(in srgb, var(--surface-popover) 80%, transparent);
}

/* ============================================================
   SLATE (Tokyo Night palette · light only)
   ============================================================ */
[data-theme="slate"] {
  --paper:#E9E9ED; --paper-2:#E1E2E7; --paper-3:#D5D6DB; --paper-raised:#F2F2F5;
  --ink:#343B58; --ink-2:#4C505E; --ink-3:#7A7E96; --ink-4:#9EA1B5;
  --line:#D2D4DB; --line-strong:#BFC2CC;
  --grove:#34548A; --grove-hover:#2C4878; --grove-press:#243C66; --grove-soft:#DBE0EC; --grove-text:#2E4C80;

  --git-modified:#8F5E15; --git-added:#33635C; --git-untracked:#34548A; --git-deleted:#8C4351; --git-renamed:#5A4A78;
  --agent:#34548A; --agent-glow:rgba(52,84,138,0.16); --agent-line:rgba(52,84,138,0.09);
  --diff-add-wash:color-mix(in oklab, var(--git-added) 16%, transparent);
  --diff-del-wash:color-mix(in oklab, var(--git-deleted) 14%, transparent);
  --diff-sweep:color-mix(in oklab, var(--accent) 20%, transparent);

  --surface-app:var(--paper); --surface-sidebar:var(--paper-2); --surface-editor:var(--paper); --surface-terminal:#E1E2E7;
  --surface-card:var(--paper-raised); --surface-popover:var(--paper-raised); --surface-well:var(--paper-3); --surface-selected:var(--grove-soft);
  --surface-hover:rgba(52,59,88,0.05); --surface-active:rgba(52,59,88,0.09);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-tertiary:var(--ink-3); --text-faint:var(--ink-4); --text-on-accent:#FFFFFF;
  --border-hairline:var(--line); --border-default:var(--line-strong); --border-strong:#AFB3C0;
  --accent:var(--grove); --accent-hover:var(--grove-hover); --accent-press:var(--grove-press); --accent-soft:var(--grove-soft); --accent-text:var(--grove-text);
  --link:var(--grove-text); --link-hover:var(--grove-press); --link-unresolved:var(--ink-4);
  --selection:rgba(52,84,138,0.16); --focus-ring:rgba(52,84,138,0.45);
  --material-sidebar:color-mix(in srgb, var(--surface-sidebar) 72%, transparent);
  --material-popover:color-mix(in srgb, var(--surface-popover) 84%, transparent);
}

/* ============================================================
   Spacing & layout (4px base grid)
   ============================================================ */
:root {
  --space-0:   0;
  --space-px:  1px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;
}

/* ============================================================
   Radii — macOS-scale corners
   ============================================================ */
:root {
  --radius-none: 0;
  --radius-xs:   4px;   /* chips, tags */
  --radius-sm:   5px;   /* buttons, inputs, menu items */
  --radius-md:   7px;   /* segmented controls, small cards */
  --radius-lg:   10px;  /* panels, popovers, callouts */
  --radius-xl:   14px;  /* window / large cards */
  --radius-2xl:  20px;  /* marketing surfaces */
  --radius-pill: 999px;
}

/* ============================================================
   Elevation & materials
   ============================================================ */
:root {
  --shadow-none:    none;
  --shadow-hairline: inset 0 0 0 1px var(--border-hairline);
  --shadow-card:    0 1px 2px rgba(30, 27, 22, 0.05), 0 1px 1px rgba(30, 27, 22, 0.04);
  --shadow-raised:  0 2px 6px rgba(30, 27, 22, 0.08), 0 1px 2px rgba(30, 27, 22, 0.05);
  --shadow-popover: 0 10px 30px rgba(30, 27, 22, 0.16), 0 2px 6px rgba(30, 27, 22, 0.08);
  --shadow-window:  0 32px 70px rgba(0, 0, 0, 0.30), 0 6px 18px rgba(0, 0, 0, 0.16);
  --shadow-drag:    0 14px 34px rgba(30, 27, 22, 0.22);

  --ring: 0 0 0 3px var(--focus-ring);

  --material-blur:     saturate(180%) blur(20px);
}

/* Deepen shadows for every dark theme */
[data-theme="dark"],
[data-theme="ink"],
[data-theme="harbor"],
[data-theme="ember"],
[data-theme="twilight"],
[data-theme="canopy"] {
  --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-raised:  0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-popover: 0 12px 34px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-window:  0 36px 80px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.5);
  --shadow-drag:    0 16px 40px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Motion
   ============================================================ */
:root {
  --ease-spring:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant:      80ms;
  --dur-reveal:       120ms;
  --dur-fast:         140ms;
  --dur-base:         220ms;
  --dur-panel:        280ms;
  --dur-patch:        420ms;
  --dur-patch-settle: 900ms;
  --dur-breath:      1900ms;

  --transition-control: background-color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
  --transition-reveal:  color var(--dur-reveal) var(--ease-out), opacity var(--dur-reveal) var(--ease-out);
  --transition-panel:   height var(--dur-panel) var(--ease-spring), opacity var(--dur-panel) var(--ease-soft), transform var(--dur-panel) var(--ease-spring);

  --press-scale: 0.97;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-reveal: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-panel: 0ms;
    --dur-patch: 0ms;
    --dur-patch-settle: 0ms;
    --dur-breath: 0ms;
    --press-scale: 1;
  }
}

/* ============================================================
   Base — keyboard focus ring
   ============================================================ */
:where(a, button, input, textarea, select, summary,
       [role="button"], [role="menuitem"], [role="option"], [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: inherit;
}