/* ============================================================
   WITHINFEED — DESIGN TOKENS
   The one place colours, sizes, radii, elevation and motion are
   defined. public/dashboard.html loads this file; the React design
   system (D2 onward) will load the same file, so old and new screens
   match while they coexist. Spec: docs/design/design-system.md.

   Chrome is paper and ink. Colour belongs to strategy: a pillar
   declares it once and it inherits down to the calendar card.
   Pillar and chart palettes are content, not tokens; they live as
   data in the page script.

   Rule (enforced by tests/design/tokens.test.ts): no literal colour,
   font size, radius, elevation shadow or duration outside this file.
   ============================================================ */
:root{
  /* SURFACES. The page is a cool grey and the content floats on it as white
     cards — the sidebar included. Everything that was one flat sheet with
     dividers is now a card with air around it. */
  --paper:#F4F5F7; --surface:#FFFFFF; --ink:#111317; --ink2:#5B6069;
  /* was #8E949E, which is 3.05:1 on white and 2.80:1 on a tinted page -
     under AA for body text on both. #6B7079 is 4.98 and 4.56, so muted
     text is still muted and is still readable. */
  --ink3:#6B7079;
  --ph:#7C828B;                       /* placeholders: quieter, still >3:1 */
  --line:#E7E9EE; --hover:#F2F3F6; --hl:#F5E94C;
  --line-strong:#D7DAE1;              /* a field's edge on hover */
  --hover-2:#E9EBF0;                  /* a chip that is already on a grey well */

  /* Ink at low strength: hover washes, wells, hairlines on colour, shades.
     Redefined in dark mode, where they become light on dark. */
  --wash:rgba(17,19,23,.03);
  --wash-2:rgba(17,19,23,.045);
  --wash-3:rgba(17,19,23,.07);
  --edge:rgba(17,19,23,.12);
  --edge-2:rgba(17,19,23,.15);
  --edge-hover:rgba(17,19,23,.18);
  --edge-3:rgba(17,19,23,.23);
  --shade:rgba(17,19,23,.36);
  --ink-soft:rgba(17,19,23,.55);      /* secondary text on a coloured ground */
  --ink-softer:rgba(17,19,23,.72);
  --ink-strong:#000;                  /* pressed state of an ink button */
  --ink-raised:#2E3338;               /* hover on an ink card */
  --on-ink:#FFFFFF;                   /* text and icons on an ink fill */
  --on-colour:#FFFFFF;                /* text on a photo or a saturated colour: white in both themes */
  --on-dark-2:rgba(251,250,248,.65);  /* secondary text on an ink card */
  --on-dark-3:rgba(251,250,248,.55);
  --veil:rgba(255,255,255,.12);       /* light overlays on dark surfaces */
  --veil-2:rgba(255,255,255,.2);
  --veil-3:rgba(255,255,255,.3);
  --scrim:rgba(17,19,23,.12);         /* behind a drawer */
  --scrim-2:rgba(17,19,23,.36);       /* behind a modal */
  --scrim-sheet:rgba(17,19,23,.32);   /* behind a phone bottom sheet */

  /* On photos and video: the same in both themes, because the image is. */
  --media-bg:#0B0D10;
  --media-scrim:rgba(11,12,14,.9);
  --media-1:rgba(0,0,0,.3);
  --media-2:rgba(0,0,0,.45);
  --media-3:rgba(0,0,0,.6);
  --media-4:rgba(0,0,0,.65);
  --ts-media:0 1px 4px rgba(0,0,0,.55);

  /* ACCENT. The brand lime. globals.css says lime type lives on dark only,
     and that still holds — this is the inverse: a lime FILL carrying ink
     type, which is where #E1FF33 is legible and loudest. Primary actions,
     the highlighted figure, selection and progress. Ink stays the voice for
     confirmations, so the lime never becomes wallpaper. A client theme may
     replace --acc, --acc-ink, --acc-soft, --acc-line and tint --paper on
     that client's views (themeVars); nothing else. */
  --acc:#E1FF33; --acc-ink:#111317; --acc-soft:#F3FFC4; --acc-line:#D2F36A;
  --acc-hover:#D5F82A;
  --acc-glow:rgba(168,196,31,.5);
  --acc-focus:rgba(225,255,51,.33);

  /* STATUS. Markers carry the hue; words stay legible on the soft fills. */
  --warn:#C98A1E; --bad:#D4473D; --good:#3E8E5A;
  --good-soft:#EDF6F0; --good-ink:#2E5F43; --good-edge:#CFE6D8;
  --warn-soft:#FCF4E2; --warn-ink:#6B5420; --warn-edge:#EEDFB8;
  --bad-soft:#FBECEA;  --bad-ink:#8C3328;
  --notice:#F7E3C8;                   /* the amber sync bar */
  --today-soft:#EDF4D6; --today-edge:#C9D89B; --today-ink:#5E6B3C;
  --danger:#A8574A;                   /* destructive actions and their messages */
  --danger-soft:#FCE9E7; --danger-soft-2:#F8DAD7;
  --danger-wash:rgba(168,87,74,.07);
  --danger-strong:#C0533F; --danger-strong-hover:#D25E48;

  --serif:'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* TYPE. One scale of ten steps (D2c, docs/decisions.md D-007). */
  --t0:11px;     /* micro: calendar post details, badges */
  --t1:12px;     /* caption, uppercase labels */
  --t2:13px;     /* UI body and meta (one size since D2c) */
  --t3:13px;
  --t4:15px;     /* reading body, form text */
  --t-input:16px;/* form inputs on phones (iOS zooms below 16px) */
  --t5:17px;     /* lede */
  --t6:22px;     /* section title, sans 600 */
  --t7:32px;     /* page title, serif */
  --t8:48px;     /* hero, serif */
  /* The exact sizes the dashboard was written with, each now an alias of its
     step. They retire as views move to the component library (D5). */
  --fs-8:var(--t0); --fs-9:var(--t0); --fs-9h:var(--t0); --fs-10:var(--t0); --fs-10h:var(--t0);
  --fs-11h:var(--t1);
  --fs-12:var(--t2); --fs-13:var(--t2);
  --fs-14:var(--t4); --fs-14h:var(--t4); --fs-15h:var(--t4);
  --fs-18:var(--t5); --fs-19:var(--t5);
  --fs-20:var(--t6); --fs-21:var(--t6); --fs-22:var(--t6); --fs-24:var(--t6); --fs-25:var(--t6);
  --fs-26:var(--t7); --fs-27:var(--t7); --fs-29:var(--t7); --fs-30:var(--t7); --fs-32:var(--t7);
  --fs-36:var(--t8); --fs-38:var(--t8); --fs-44:var(--t8); --fs-46:var(--t8);
  --fs-64:64px;  /* the one display number */

  /* RADII. Five (D2c): cards, controls, small, tiny marks, pills. */
  --r:16px; --r2:10px; --r3:10px; --r4:6px; --r-3:3px; --rf:999px;
  /* Aliases of the radii the dashboard was written with. */
  --r-16:var(--r); --r-5:var(--r4); --r-4:var(--r4); --r-2:var(--r-3);

  /* ELEVATION. Wider and softer than before, so a card reads as lifted rather
     than outlined. */
  --sh:0 1px 2px rgba(17,19,23,.03), 0 8px 24px rgba(17,19,23,.05);
  --sh2:0 2px 8px rgba(17,19,23,.05), 0 24px 56px rgba(17,19,23,.10);
  --sh-sm:0 1px 2px rgba(17,19,23,.06), 0 2px 8px rgba(17,19,23,.06);
  --sh-xs:0 1px 3px rgba(17,19,23,.13);
  --sh-acc-hover:0 4px 14px -4px var(--acc-glow);
  --sh-ink-hover:0 4px 14px -4px rgba(17,19,23,.35);
  --sh-tile-hover:inset 0 0 0 1px var(--edge-hover), 0 5px 14px -8px var(--shade);
  --sh-pop:0 10px 30px var(--edge-3);
  --sh-drag:0 10px 26px var(--edge-3);
  --sh-sheet:0 0 60px -10px var(--shade);
  --halo:0 0 0 5px var(--wash);       /* an editable field, hovered */
  --halo-2:0 0 0 5px var(--wash-3);   /* an editable field, focused */
  --focus-field:inset 0 0 0 1.5px var(--ink), 0 0 0 3px var(--acc-focus);

  /* MOTION. One easing, three speeds. */
  --e:cubic-bezier(.2,.7,.3,1);
  --d1:.12s; --d2:.18s; --d3:.3s;
  --d0:0s;       /* reduced motion */

  /* SPACE (D2a). The 4px scale every component spaces itself with. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  /* CONTROLS (D2a). One height per control size; nothing on a phone is a
     smaller target than --tap (WCAG 2.5.8, design-system.md §5). */
  --ctl:40px; --ctl-sm:32px; --tap:44px;
  /* STACKING (D2b-2). Which layer sits on which. A modal or drawer opened
     with the browser's <dialog> is in the top layer and needs none of these. */
  --z-sticky:10; --z-menu:50; --z-toast:60; --z-tooltip:70;

  --rail:252px;
}

/* Less motion when the device asks for it: every speed collapses to none. */
@media (prefers-reduced-motion: reduce){ :root{ --d1:0s; --d2:0s; --d3:0s } }

/* DARK. Designed now, switched on at D6 (docs/decisions.md, D-005), once
   every screen draws from these tokens. Until then nothing sets
   data-theme="dark", so this block never applies. */
:root[data-theme="dark"]{
  --paper:#0E0F12; --surface:#17191D; --ink:#F3F4F6; --ink2:#BEC3CB; --ink3:#959BA6; --ph:#878D98;
  --line:#2A2E35; --hover:#1F2228; --hover-2:#262A31; --line-strong:#3A3F47;
  --wash:rgba(243,244,246,.03); --wash-2:rgba(243,244,246,.045); --wash-3:rgba(243,244,246,.07);
  --edge:rgba(243,244,246,.12); --edge-2:rgba(243,244,246,.15); --edge-hover:rgba(243,244,246,.18); --edge-3:rgba(243,244,246,.23);
  --shade:rgba(0,0,0,.5); --ink-soft:rgba(243,244,246,.6); --ink-softer:rgba(243,244,246,.78);
  --ink-strong:#FFFFFF; --ink-raised:#D9DCE1; --on-ink:#111317;
  --scrim:rgba(0,0,0,.35); --scrim-2:rgba(0,0,0,.6); --scrim-sheet:rgba(0,0,0,.55);
  --acc-soft:#2A3310; --acc-line:#55661A;
  --good:#5CC488; --warn:#E3AE55; --bad:#F0776E;
  /* Notices and danger, proposed in the D2 gallery: deep fills, light ink,
     each pair at AA or better (checked in the gallery by axe). */
  --good-soft:#15251B; --good-ink:#9FDDB8; --good-edge:#25412F;
  --warn-soft:#2A2213; --warn-ink:#EDCB86; --warn-edge:#4A3B1C;
  --bad-soft:#2C1715;  --bad-ink:#F5ABA4;
  --danger:#F2907F; --danger-soft:#3A1C19; --danger-soft-2:#4A2420;
  --danger-wash:rgba(242,144,127,.08);
  --danger-strong:#E0644F; --danger-strong-hover:#EC7560;
  /* The sync bar and the calendar's today, proposed in D2b-2. */
  --notice:#3A2C17;
  --today-soft:#222A12; --today-edge:#4A5A22; --today-ink:#C9D98F;
  --sh:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --sh2:0 2px 8px rgba(0,0,0,.45), 0 24px 56px rgba(0,0,0,.5);
  --sh-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35);
  color-scheme:dark;
}