/* Victoria Atlas — design tokens.
   Colour families are named for the landscape, not for data types.
   Categorical fills verified with Viénot dichromat simulation + CIEDE2000:
   worst pair 13.1 (light) / 12.3 (dark) across protan/deutan/tritan;
   every mark >=3:1 against its ground (WCAG 1.4.11).
   Adding a category requires re-running scripts/check_palette.py.

   Honest ceiling, stated once: ΔE00 >= 15 under all three dichromacies is
   NOT achievable for six categorical fills — a dichromat's colour space is
   2-D. That is why this is six families and not nine hues, and why SHAPE
   stays the primary encoding (lib/shapes.js). Do not add a seventh family
   without re-running the validator. */

:root {
  color-scheme: light dark;

  /* ---- ground & surfaces ---- */
  --ground:        #F4F1EA;   /* the canvas. paper. */
  --surface:       #FCFAF5;   /* panels, cards */
  --surface-sunk:  #EDE9DF;   /* inset rows, inputs, hover fill */
  --rule:          #DAD4C6;   /* hairlines inside a panel */
  --rule-strong:   #B9B1A0;   /* panel edge, scope-line rule */

  /* ---- ink ---- */
  --ink:           #17150F;   /* 17.4:1 */
  --ink-2:         #4A463D;   /*  8.4:1 */
  --ink-3:         #6D685F;   /*  4.8:1 — lowest legal for text */
  --ink-accent:    #046192;
  --ink-accent-hi: #0A7EBC;
  --focus:         #0A7EBC;

  /* ---- categorical marks: one hue per LAYER QUESTION (lib/layers.js) ---- */
  --mark-people: #046192;  /* tide        — Who's here (Person) */
  --mark-org:    #AB3F38;  /* arbutus     — Who's here (Organization) */
  --mark-place:  #00936D;  /* estuary     — Where does it live */
  --mark-work:   #849331;  /* meadow      — What's happening (doing) */
  --mark-idea:   #71235C;  /* huckleberry — What's happening (thinking) */
  --mark-source: #383431;  /* basalt      — Where knowledge comes from */

  /* ---- epistemic state: an axis INDEPENDENT of type ---- */
  --ink-open:    #6D685F;   /* unconnected / open question */
  --ink-pin:     #B06A00;   /* pinned */
  --ink-confirm: #2E6B4A;
  --ink-reject:  #9A3B33;
  --ink-loss:    #8A5A1E;   /* declared loss in the scope line */

  /* ---- graph ---- */
  --edge:        #B3AB99;
  --edge-place:  #6FA894;   /* located_in — 41% of all edges */
  --halo:        rgba(244, 241, 234, 0.92);
  --ghost:       rgba(23, 21, 15, 0.05);   /* hidden nodes, sparse views */

  /* ---- elevation ---- */
  --elev-1: 0 1px 2px rgba(40,34,22,.07), 0 6px 18px rgba(40,34,22,.09);
  --elev-2: 0 2px 6px rgba(40,34,22,.10), 0 14px 40px rgba(40,34,22,.14);

  /* ---- type ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui:      "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-micro: 10.5px;  --lh-micro: 1.35;
  --fs-fine:  11.5px;  --lh-fine:  1.45;
  --fs-ui:    13px;    --lh-ui:    1.45;
  --fs-body:  14px;    --lh-body:  1.55;
  --fs-lede:  15.5px;  --lh-lede:  1.45;
  --fs-title: 19px;    --lh-title: 1.2;
  --fs-hero:  22px;    --lh-hero:  1.15;

  --wt-regular: 400;  --wt-medium: 500;  --wt-semi: 600;

  /* ---- rhythm ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  --rail-left: 264px;
  --rail-right: 360px;
  --header-h: 48px;
  --scope-h: 26px;

  /* ---- motion ---- */
  --dur-tap:   90ms;
  --dur-ui:    180ms;
  --dur-cam:   420ms;
  --ease-out:  cubic-bezier(.2,.7,.3,1);
  --ease-soft: cubic-bezier(.5,0,.2,1);
}

/* Dark palette. The SAME declaration block appears under both selectors so a
   manual toggle wins in both directions. Do not factor it into a shared class
   — :root[data-theme="dark"] must OVERRIDE the media query, not merge with
   it, or the toggle cannot turn dark off on a dark-preferring machine.
   Keep the two blocks byte-identical; the duplication is the mechanism. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0F1A21;  --surface: #16232B;  --surface-sunk: #1D2E37;
    --rule: #2A3B45;    --rule-strong: #3E5560;
    --ink: #E8E9E4;     --ink-2: #AEB8BB;    --ink-3: #A0AEB3;
    --ink-accent: #6FC3F0; --ink-accent-hi: #9AD8F8; --focus: #6FC3F0;

    --mark-people: #3BACF0;  --mark-org:    #FD8A87;
    --mark-place:  #6DE1B7;  --mark-work:   #D7E57B;
    --mark-idea:   #B96BAC;  --mark-source: #979CA0;

    --ink-open: #A0AEB3;   --ink-pin: #E0A945;
    --ink-confirm: #6FBF93; --ink-reject: #E58B84; --ink-loss: #D0A566;

    --edge: #3A4C57;  --edge-place: #4B7A70;
    --halo: rgba(15, 26, 33, 0.92);
    --ghost: rgba(232, 233, 228, 0.055);

    --elev-1: 0 1px 2px rgba(0,0,0,.5),  0 8px 28px rgba(0,0,0,.55);
    --elev-2: 0 2px 8px rgba(0,0,0,.55), 0 18px 50px rgba(0,0,0,.62);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0F1A21;  --surface: #16232B;  --surface-sunk: #1D2E37;
  --rule: #2A3B45;    --rule-strong: #3E5560;
  --ink: #E8E9E4;     --ink-2: #AEB8BB;    --ink-3: #A0AEB3;
  --ink-accent: #6FC3F0; --ink-accent-hi: #9AD8F8; --focus: #6FC3F0;

  --mark-people: #3BACF0;  --mark-org:    #FD8A87;
  --mark-place:  #6DE1B7;  --mark-work:   #D7E57B;
  --mark-idea:   #B96BAC;  --mark-source: #979CA0;

  --ink-open: #A0AEB3;   --ink-pin: #E0A945;
  --ink-confirm: #6FBF93; --ink-reject: #E58B84; --ink-loss: #D0A566;

  --edge: #3A4C57;  --edge-place: #4B7A70;
  --halo: rgba(15, 26, 33, 0.92);
  --ghost: rgba(232, 233, 228, 0.055);

  --elev-1: 0 1px 2px rgba(0,0,0,.5),  0 8px 28px rgba(0,0,0,.55);
  --elev-2: 0 2px 8px rgba(0,0,0,.55), 0 18px 50px rgba(0,0,0,.62);
}

/* An explicit light choice must also pin the UA colour scheme, or form
   controls and scrollbars stay dark on a dark-preferring machine. */
:root[data-theme="light"] { color-scheme: light; }

:root { --paper: var(--ground); --panel: var(--surface); --line: var(--rule); }

/* ─────────────────────────────────────────────────────────────────────────
   SITE-LEVEL ADDITIONS (salishsee.life)

   Everything above this line is the Victoria Atlas token file, copied
   verbatim so the home, the exchange view, the essay and the Atlas itself
   cannot drift apart. Do not edit the block above here; edit
   atlas/src/theme.css and re-copy, or the two surfaces diverge and the
   dichromat validation (atlas/scripts/check_palette.py) stops covering the
   colours the site actually ships.

   The additions below exist because the site has two things the Atlas does
   not: long-form prose measured for reading, and an exchange timeline whose
   states are epistemic (offered / received / staged / accepted / rejected /
   updated) rather than categorical.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Reading measure. Prose is 66ch; a figure may break out to 100ch. */
  --measure:      66ch;
  --measure-wide: 100ch;
  --gutter:       max(20px, env(safe-area-inset-left));

  /* Two type steps above the Atlas's --fs-hero, for a page that is read
     rather than operated. The Atlas tops out at 22px because it is chrome
     around a canvas; a home page and an essay need a real display size. */
  --fs-display: clamp(30px, 2.4vw + 20px, 46px);  --lh-display: 1.06;
  --fs-section: clamp(20px, 0.9vw + 16px, 26px);  --lh-section: 1.18;

  /* Exchange states. These reuse the Atlas's epistemic axis rather than
     inventing a second vocabulary: a rejected edge and a rejected
     contribution are the same colour on purpose. */
  --state-offered:  var(--ink-3);
  --state-received: var(--ink-accent);
  --state-staged:   var(--ink-pin);
  --state-accepted: var(--ink-confirm);
  --state-rejected: var(--ink-reject);
  --state-updated:  var(--mark-idea);

  --s7: 48px; --s8: 72px; --s9: 112px;

  /* The affiliation band under the header. Fixed height so body padding and
     the essay's sticky table of contents can both account for it. */
  --affil-h: 0px; /* the affiliation band is gone; see shell.js mountByline */
}