/* ============================================================
   TEST TUBE 21   DESIGN TOKENS
   The page is the desk: graphite, matte, institutional.
   The documents are paper laid on it. The reading light is
   the only thing that decides what you can see at once.
   Variable names are unchanged so every inherited stylesheet
   moves with them.
   ============================================================ */
:root {
  color-scheme: dark;

  /* --- Ground: the desk ------------------------------------ */
  --void:        #292d33;   /* the page */
  --ink-950:     #2e333a;
  --ink-900:     #343a42;   /* raised panel */
  --ink-850:     #3c434c;
  --ink-800:     #464e58;
  --ink-700:     #5a636f;
  --ink-600:     #737d8a;

  /* --- Paper: the documents -------------------------------- */
  --paper:       #ece7d8;
  --paper-2:     #ded7c3;
  --paper-3:     #cfc7b0;
  --paper-ink:   #1a1c1f;
  --manila:      #d8cba6;
  --carbon:      #b9b3a3;

  /* --- Type on ground -------------------------------------- */
  --bone:        #f0eee8;
  --bone-2:      #c9c6bd;
  --bone-3:      #9fa2a8;
  --bone-4:      #848890;

  /* --- Vibrant inks: these are the interactive colours ------ */
  --warm:        #f0b64e;   /* amber. every control, every focus */
  --warm-deep:   #c98a24;
  --warm-soft:   rgba(240,182,78,0.14);
  --stamp:       #ef5a3c;   /* rubber stamp red */
  --stamp-soft:  rgba(239,90,60,0.16);
  --clinic:      #3fcfb4;   /* clinical credential */
  --steel:       #7cb2ec;   /* state credential */
  --highlight:   #ffe14d;   /* marker */
  --graphite:    #a9b4c2;
  --mist:        #e7ecf2;

  /* --- Structure ------------------------------------------- */
  --rule:        rgba(240,238,232,0.16);
  --rule-2:      rgba(240,238,232,0.08);
  --rule-strong: rgba(240,238,232,0.34);
  --paper-rule:  rgba(26,28,31,0.22);

  /* --- Type ------------------------------------------------ */
  --f-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --f-text:    'Newsreader', 'Iowan Old Style', Georgia, serif;
  --f-ui:      "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-doc:     "Courier Prime", "Courier New", Courier, monospace;

  /* A calmer scale. The old one ran 5.5:1 from hero to body, which is
     what made the page feel like shouting and whispering by turns.
     This runs about 2.2:1 between a section head and its text, and
     separation is carried by weight, colour and tracking instead. */
  --t-hero:  clamp(2.4rem, 5.6vw, 4.4rem);
  --t-xxl:   clamp(1.75rem, 2.9vw, 2.35rem);
  --t-xl:    clamp(1.5rem, 2.3vw, 1.9rem);
  --t-lg:    clamp(1.28rem, 1.7vw, 1.45rem);
  --t-md:    clamp(1.1rem, 1.25vw, 1.2rem);
  --t-body:  clamp(1.06rem, 1.1vw, 1.1rem);
  --t-sm:    clamp(0.96rem, 1vw, 1rem);
  --t-micro: 0.83rem;
  --t-label: 0.9rem;
  --t-ui:    0.98rem;
  --t-ui-lg: 1.06rem;

  --track-ui: 0.13em;
  --track-wide: 0.24em;
  --track-tight: 0.09em;

  /* --- Space ----------------------------------------------- */
  --s1: 0.4rem;  --s2: 0.75rem; --s3: 1.15rem; --s4: 1.75rem;
  --s5: 2.6rem;  --s6: 4rem;    --s7: 5.5rem;  --s8: 8rem;
  --act-pad: clamp(3.75rem, 8vh, 7rem);
  --gutter: clamp(1.15rem, 5vw, 5.5rem);
  --measure: 34rem;
  --wide: 78rem;

  /* --- Motion ---------------------------------------------- */
  --e-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --e-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --e-soft: cubic-bezier(0.33, 0.9, 0.25, 1);
  --e-snap: cubic-bezier(0.2, 1.5, 0.4, 1);
  --d-1: 220ms; --d-2: 480ms; --d-3: 900ms; --d-4: 1500ms;
  --z-grain: 1; --z-body: 2; --z-nav: 60; --z-boot: 90; --z-modal: 80;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-1: 1ms; --d-2: 1ms; --d-3: 1ms; --d-4: 1ms; }
}

:root {
  --grain-src: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.86%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27180%27%20height%3D%27180%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.26%27%2F%3E%3C%2Fsvg%3E");
}

/* The desk has a texture and a faint ruled grid, like a form
   printed on card stock. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(240,238,232,0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,238,232,0.030) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  opacity: 0.9;
}
body > * { position: relative; z-index: 2; }


/* ------------------------------------------------------------
   SECTION COLOUR
   Each room in the archive has its own ink, so the site stops
   reading as one grey block and you can tell where you are
   without looking at the navigation.
   ------------------------------------------------------------ */
:root[data-page="home"]     { --accent: #f0b64e; }
:root[data-page="people"]   { --accent: #7cb2ec; }
:root[data-page="evidence"] { --accent: #3fcfb4; }
:root[data-page="map"]      { --accent: #b49ae8; }
:root[data-page="archive"]  { --accent: #ef7a52; }
:root[data-page="novel"]    { --accent: #f0b64e; }
:root[data-page="author"]   { --accent: #3fcfb4; }

/* No flash of the wrong ink: the navigation already says which page
   this is, so the colour resolves in CSS before the first paint. */
:root:has(.nav__links a[href="/people/"][aria-current])   { --accent: #7cb2ec; }
:root:has(.nav__links a[href="/evidence/"][aria-current]) { --accent: #3fcfb4; }
:root:has(.nav__links a[href="/map/"][aria-current])      { --accent: #b49ae8; }
:root:has(.nav__links a[href="/archive/"][aria-current])  { --accent: #ef7a52; }
:root:has(.nav__links a[href="/the-novel/"][aria-current]){ --accent: #f0b64e; }
:root:has(.nav__links a[href="/author/"][aria-current])   { --accent: #3fcfb4; }