/* ============================================================
   ANCHOR STACK — design tokens
   Palette is drawn from an anchor's actual material: cast bronze
   oxidising in seawater. Verdigris is the accent, brass the
   highlight, and the neutrals are biased green-blue so nothing
   reads as unconsidered grey.

   Every component styles through these tokens and never reaches
   inside a media query, so the three theme blocks below are the
   only place colour is decided.
   ============================================================ */

:root {
  /* --- type roles --- */
  --f-display: "Bahnschrift SemiCondensed", "Bahnschrift", "DIN Alternate",
               "Franklin Gothic Medium", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-body: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont,
            "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", Menlo, monospace;

  /* --- scale --- */
  --t-hero: clamp(3.1rem, 9.5vw, 8rem);
  --t-h2:   clamp(2.1rem, 5.2vw, 4rem);
  --t-h3:   clamp(1.15rem, 1.9vw, 1.5rem);
  --t-lede: clamp(1.06rem, 1.55vw, 1.3rem);
  --t-body: 1.0425rem;
  --t-label: 0.7rem;

  /* --- rhythm --- */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --rail: 92px;
  --measure: 34rem;
  --strata-pad: clamp(4.5rem, 10vh, 8rem);
  --radius: 3px;

  /* --- light theme (default): shallow water --- */
  --bg-1: #F5F9F7;
  --bg-2: #DEEAE6;
  --bg-3: #BCD1CC;
  --ink:      #0C2429;
  --ink-2:    #3D5B5D;
  --ink-3:    #6C8288;
  --accent:   #17705C;
  --accent-2: #2E9179;
  --metal:    #8A6320;
  --line:     rgba(12, 36, 41, 0.14);
  --line-2:   rgba(12, 36, 41, 0.07);
  --panel:    rgba(255, 255, 255, 0.66);
  --panel-2:  rgba(255, 255, 255, 0.9);
  --panel-edge: rgba(12, 36, 41, 0.1);
  --slab-a:  rgba(255, 255, 255, 0.82);
  --slab-b:  rgba(206, 224, 219, 0.72);
  --slab-edge: rgba(23, 112, 92, 0.35);
  --glow: rgba(23, 112, 92, 0.1);

  /* chain material, tuned for a pale ground */
  --chain-shadow: #7C9A97;
  --chain-mid:    #A0864A;
  --chain-hi:     #FFF8E2;
  --chain-rim:    #17705C;
  --shaft:        #FFFFFF;
  --mote:         #4F7A76;
  --fade-to:      #F5F9F7;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-1: #0C2028;
    --bg-2: #08181E;
    --bg-3: #040D11;
    --ink:      #E7F0ED;
    --ink-2:    #A7BDBB;
    --ink-3:    #7B9394;
    --accent:   #5CC4AB;
    --accent-2: #3E9C86;
    --metal:    #D6A85C;
    --line:     rgba(231, 240, 237, 0.16);
    --line-2:   rgba(231, 240, 237, 0.07);
    --panel:    rgba(231, 240, 237, 0.045);
    --panel-2:  rgba(231, 240, 237, 0.075);
    --panel-edge: rgba(231, 240, 237, 0.12);
    --slab-a:  rgba(92, 196, 171, 0.14);
    --slab-b:  rgba(8, 24, 30, 0.86);
    --slab-edge: rgba(92, 196, 171, 0.5);
    --glow: rgba(92, 196, 171, 0.12);

    --chain-shadow: #0F3239;
    --chain-mid:    #8A7442;
    --chain-hi:     #F4E4B4;
    --chain-rim:    #5CC4AB;
    --shaft:        #7FD8C2;
    --mote:         #9FD8CC;
    --fade-to:      #0C2028;

    color-scheme: dark;
  }
}

/* The viewer's own toggle must beat the media query, in both directions. */
:root[data-theme="light"] {
  --bg-1: #F5F9F7; --bg-2: #DEEAE6; --bg-3: #BCD1CC;
  --ink: #0C2429; --ink-2: #3D5B5D; --ink-3: #6C8288;
  --accent: #17705C; --accent-2: #2E9179; --metal: #8A6320;
  --line: rgba(12,36,41,0.14); --line-2: rgba(12,36,41,0.07);
  --panel: rgba(255,255,255,0.66); --panel-2: rgba(255,255,255,0.9);
  --panel-edge: rgba(12,36,41,0.1);
  --slab-a: rgba(255,255,255,0.82); --slab-b: rgba(206,224,219,0.72);
  --slab-edge: rgba(23,112,92,0.35); --glow: rgba(23,112,92,0.1);
  --chain-shadow: #7C9A97; --chain-mid: #A0864A; --chain-hi: #FFF8E2;
  --chain-rim: #17705C; --shaft: #FFFFFF; --mote: #4F7A76; --fade-to: #F5F9F7;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg-1: #0C2028; --bg-2: #08181E; --bg-3: #040D11;
  --ink: #E7F0ED; --ink-2: #A7BDBB; --ink-3: #7B9394;
  --accent: #5CC4AB; --accent-2: #3E9C86; --metal: #D6A85C;
  --line: rgba(231,240,237,0.16); --line-2: rgba(231,240,237,0.07);
  --panel: rgba(231,240,237,0.045); --panel-2: rgba(231,240,237,0.075);
  --panel-edge: rgba(231,240,237,0.12);
  --slab-a: rgba(92,196,171,0.14); --slab-b: rgba(8,24,30,0.86);
  --slab-edge: rgba(92,196,171,0.5); --glow: rgba(92,196,171,0.12);
  --chain-shadow: #0F3239; --chain-mid: #8A7442; --chain-hi: #F4E4B4;
  --chain-rim: #5CC4AB; --shaft: #7FD8C2; --mote: #9FD8CC; --fade-to: #0C2028;
  color-scheme: dark;
}