/* ============================================================
   Design tokens. THE ONLY FILE WITH COLOUR VALUES.
   Calm Teal palette (Reuben's spec, 2026-10-17). ~85% neutral; teal only for
   primary buttons, active navigation, focus and small highlights.
   Contrast (WCAG 2.x): text 14.4:1 on bg / 15.6:1 on card; text-2 9.0:1 on bg; muted 5.6:1 on bg,
   6.0:1 on card; white on accent 5.5:1 (gradient top #13817A 4.7:1; #14857B would be 4.496, just under AA); accent text on bg 5.1:1. All AA for body text.
   ============================================================ */
:root{
  color-scheme:light;
  /* ---- palette (aligned with Pixel brand/premium/tokens.css v3, plus Reuben's glass finish) ---- */
  --bg:#F7F6F2; --bg-1:#F2F1EC; --bg-sunk:#EFEEE8;       /* warm white; sunk = bands, stripes, code */
  --surface-1:#FFFFFF; --surface-2:#FBFAF7; --surface-3:#EFEEE8; --surface-solid:#FFFFFF;   /* cards / insets */
  --glass:rgba(255,255,255,.68); --glass-strong:rgba(255,255,255,.86);   /* frosted glass (Apple-like) */
  --glass-edge:rgba(255,255,255,.6); --glass-hi:inset 0 1px 0 rgba(255,255,255,.8);
  --line:#DEE3DF; --line-strong:#C9D0CB; --line-ui:#7D8781;   /* fine borders; line-ui = input edges, 3.7:1 on card (WCAG 1.4.11) */
  --text:#202522; --text-2:#3F4642; --muted:#5C6560; --faint:#8A928D;   /* faint = decorative only */
  --accent:#0F766E; --accent-rgb:15,118,110; --accent-hover:#0D655E; --accent-press:#0B5550; --accent-ink:#FFFFFF;
  --selected:#E8F3EF;                                  /* pale teal: selected items */
  --error:#B42318; --error-bg:#FEF3F2; --error-line:#F4C7C3;      /* red, distinct from brand */
  --warning:#B54708; --warning-bg:#FFF7ED; --warning-line:#F5D3B0; /* warm amber, distinct from brand */
  --ink:#202522; --on-ink:#FFFFFF; --on-ink-2:#B9C0BB;   /* inverted Pro card (Pixel v3): 15.6 / 8.4 */
  --platinum:#FFFFFF; --platinum-2:#B9C0BB; --platinum-rgb:255,255,255; --platinum-ink:#202522;   /* Pro: white-on-ink, not brand */
  --grad-brand:linear-gradient(180deg,#13817A 0%,#0F766E 100%);   /* gentle top-to-bottom teal */
  --grad-brand-hover:linear-gradient(180deg,#0F766E 0%,#0D655E 100%);
  --grad-platinum:var(--platinum);
  --pro-surface:var(--surface-1);
  /* ambient washes: very soft, large, low opacity (pale teal + faint warm sand) */
  --bg-glow:radial-gradient(1200px 800px at 85% -10%,rgba(232,243,239,.95),rgba(232,243,239,0) 65%),radial-gradient(1000px 700px at -10% 30%,rgba(239,231,214,.45),rgba(239,231,214,0) 60%),radial-gradient(1100px 800px at 60% 110%,rgba(232,243,239,.7),rgba(232,243,239,0) 60%);
  --primary:var(--accent); --primary-rgb:var(--accent-rgb); --primary-hover:var(--accent-hover); --primary-pressed:var(--accent-press); --primary-ink:var(--accent-ink);
  --xp:var(--accent); --xp-ink:var(--accent-ink); --mana:var(--accent);
  --hover-tint:rgba(32,37,34,.04);

  /* ---- derived ---- */
  --primary-glow:transparent; --accent-glow:transparent;
  --hairline-hi:none;
  --glow-primary:0 0 0 1.5px var(--primary);
  --glow-accent:0 0 0 1.5px var(--accent);
  --focus:0 0 0 2px var(--bg),0 0 0 4px var(--primary);

  /* ---- type: one clean sans for everything; mono only for data ---- */
  --font-display:"Space Grotesk","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-hero:clamp(40px,6vw,72px); --fs-h1:clamp(32px,4.2vw,50px); --fs-h2:clamp(26px,3vw,36px);
  --fs-h3:clamp(18px,1.6vw,20px); --fs-lg:clamp(17px,1.3vw,19px); --fs-body:16px; --fs-sm:14px; --fs-xs:12.5px;
  --lh-tight:1.08; --lh-head:1.2; --lh-body:1.65;
  --tracking-hero:-0.03em; --tracking-head:-0.018em; --tracking-mono:0.06em;
  /* ---- space / layout / radius ---- */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:144px;
  --container:1160px; --container-narrow:740px; --sidebar:224px;
  --r-sm:8px; --r-md:12px; --r-lg:14px; --r-xl:18px; --r-pill:999px;
  --tap:44px;
  /* ---- elevation: restrained ---- */
  --shadow-1:0 1px 2px rgba(32,37,34,.04);
  --shadow-2:0 1px 2px rgba(32,37,34,.04),0 6px 16px -8px rgba(32,37,34,.10);
  --shadow-3:0 1px 2px rgba(32,37,34,.05),0 14px 32px -16px rgba(32,37,34,.16);
  --shadow-glass:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px var(--line),0 1px 2px rgba(32,37,34,.04),0 8px 24px -12px rgba(32,37,34,.12),0 24px 48px -24px rgba(32,37,34,.10);
  /* ---- motion ---- */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-spring:cubic-bezier(.34,1.3,.64,1);
  --t-fast:120ms; --t-base:200ms; --t-step:280ms; --t-slow:400ms; --t-reveal:560ms;
  --blur-glass:20px;

  /* ---- Fun pass (2026-10-17): logo F accents + sticker system. Charcoal outlines, hard offset shadows. ---- */
  --sun:#FFD45C; --sun-2:#FFE79A; --sun-soft:#FFF6D6;        /* logo yellow; text on these is always --ink (11.0:1 on --sun) */
  --coral:#FF7A66; --coral-soft:#FFE8E2; --coral-ink:#A3321F;  /* logo coral; coral-ink 5.9:1 on coral-soft, 6.9:1 on white */
  --teal-soft:#D3EDE6;
  --outline:#202522; --bw:2px;
  --pop-sm:2px 2px 0 var(--outline); --pop:4px 4px 0 var(--outline); --pop-lg:6px 6px 0 var(--outline); --pop-teal:4px 4px 0 var(--accent);
  --r-chunk:18px;
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --dot-grid:radial-gradient(rgba(32,37,34,.075) 1.1px,transparent 1.4px);
  --cursor-pixel:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='26' viewBox='0 0 12 17' shape-rendering='crispEdges'><path fill='%23202522' d='M0 0h1v1H0zM0 1h2v1H0zM0 2h1v1H0zM2 2h1v1H2zM0 3h1v1H0zM3 3h1v1H3zM0 4h1v1H0zM4 4h1v1H4zM0 5h1v1H0zM5 5h1v1H5zM0 6h1v1H0zM6 6h1v1H6zM0 7h1v1H0zM7 7h1v1H7zM0 8h1v1H0zM8 8h1v1H8zM0 9h1v1H0zM9 9h1v1H9zM0 10h1v1H0zM6 10h5v1H6zM0 11h1v1H0zM3 11h1v1H3zM6 11h1v1H6zM0 12h1v1H0zM2 12h1v1H2zM4 12h1v1H4zM7 12h1v1H7zM0 13h2v1H0zM4 13h1v1H4zM7 13h1v1H7zM0 14h1v1H0zM5 14h1v1H5zM8 14h1v1H8zM5 15h1v1H5zM8 15h1v1H8zM6 16h2v1H6z'/><path fill='%23FFD45C' d='M1 2h1v1H1zM1 3h2v1H1zM1 4h3v1H1zM1 5h4v1H1zM1 6h5v1H1zM1 7h6v1H1zM1 8h7v1H1zM1 9h8v1H1zM1 10h5v1H1zM1 11h2v1H1zM4 11h2v1H4zM1 12h1v1H1zM5 12h2v1H5zM5 13h2v1H5zM6 14h2v1H6zM6 15h2v1H6z'/></svg>") 1 1,auto;
}
@media (prefers-reduced-motion:reduce){:root{--t-fast:0ms;--t-base:0ms;--t-step:0ms;--t-slow:0ms;--t-reveal:0ms}}
@media (prefers-reduced-transparency:reduce){:root{--glass:#FFFFFF;--glass-strong:#FFFFFF;--blur-glass:0px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--glass:#FFFFFF;--glass-strong:#FFFFFF}}