/* ============================================================
   TEXT COLOUR — TWO VALUES
   Loaded last, after type.css.

   Before this the site ran five text colours:

     --ink     #000000   headings, titles, stats            159 uses
     --ink-2   #473c39   body, lists, code, table cells     166 uses
     --muted   #7c6d67   captions, labels, eyebrows          54 uses
     --faint   #969696   footer                              41 uses
     --accent  #92400e   the ✽, emphasis, kickers            15 uses

   Now two: --ink for anything that is a heading or a title, --ink-2 for
   everything else. Hierarchy comes from size and weight, which the type system
   already carries; colour was doing the same job a third time.

   The dark footer band is the one exception, and it is not a third colour — it
   is the inverse of the same relationship on a black ground.
   ============================================================ */

:root{
  /* Palette taken from the shadcn reference, converted from its oklch values:
       zinc-900   -> #18181b   headings
       zinc-700   -> #3f3f46   body
       zinc-200   -> #e4e4e7   borders
       zinc-100   -> #f4f4f5   muted surface
       zinc-300   -> #d4d4d8   list markers
     Every grey on the site is Tailwind's zinc scale, in both themes: a hint of
     cool (chroma ~0.005) that sits with the blue without reading as a colour.
     Gray (~0.03) read blue next to the black-and-white portrait; neutral (0)
     felt flat, especially in dark.

     Cool slate rather than the warm browns the site carried. The paper ground
     goes with it: warm paper under cool text reads as a mismatch, not a
     deliberate contrast. Revert by restoring --ink/--ink-2/--paper below. */
  --ink:#18181b;
  --ink-2:#3f3f46;
  /* a third, quieter text colour for fine print: zinc-500, 4.6:1 on the ground */
  --ink-3:#71717b;
  --paper:#ffffff;
  --rule:#e4e4e7;
  --rule-2:#d4d4d8;
  --sink:#f4f4f5;
  /* the ground the page sits on below the hero - a half-step off paper, just
     enough to read as a separate surface without becoming a grey page */
  --ground:#fafafa;
  /* behind the cut-out portrait in the hero, the same in both themes:
     zinc-800 */
  --portrait-ground:#27272a;
  /* the role's tint in the hero: the tile grey in light */
  --role-ground:var(--sink);
  /* blueprint: the mono face, grey construction guides, and the blue of a
     selection (the hero inspector and the project cells) */
  --mono:'Geist Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  --gd:rgba(63,63,70,.28);
  --gd-strong:rgba(63,63,70,.62);
  --sel:var(--accent);
  --sel-text:var(--accent-text);
  --sel-ink:#ffffff;
  --sel-soft:rgba(43,127,255,.35);
  /* the footer's 'available now' dot: green-500 */
  --status-on:#00c950;
  --marker:#d4d4d8;

  /* the field palette is defined in tiers.css - four greys, kept out of this
     file because they are surfaces, not text colour */

  --muted:#3f3f46;
  --faint:#3f3f46;
  /* Blue, the one colour outside the two-colour text rule: Tailwind v4's blue,
     in two strengths.
     --accent       blue-500 #2b7fff  UI only: outlines, borders, selection,
                    icons. 3.76:1 on white, 3.6:1 on --ground: clears the 3:1
                    non-text bar, not the 4.5:1 text bar.
     --accent-text  blue-600 #155dfc  any blue text and any blue fill behind
                    white text. 5.25:1 on white, 5.03:1 on --ground, 4.81:1 on
                    --sink, and white on it is 5.25:1.
     Wide-gamut screens get the real oklch values (below), which is what makes
     it read electric; the lightness is the same, so contrast holds.
     Not on the navy footer: no recognisable blue clears 4.5:1 there, so
     footer links keep hovering to white.

     --hover-t: one duration for every hover, quick enough to feel direct. */
  --accent:#2b7fff;
  --accent-text:#155dfc;
  --hover-t:.1s;
  --accent-ink:#92400e;
}

@supports (color:oklch(0 0 0)){
  :root{--accent:oklch(62.3% 0.214 259.815);--accent-text:oklch(54.6% 0.245 262.881);}
}

/* the case study title is one colour: the two-tone split was doing the same
   job the size already does */
h1.cs-title,h1.cs-title .lead{color:var(--ink);}
.pullquote em,.section .body p.pullquote em{color:var(--ink);}

/* the ✽ is text, so it follows the rule. --accent still resolves to #000000
   for anything that has not been converted, so name the token explicitly. */
h1.name .star,.demo-h1 .star,.rd-hero h1 .star{color:var(--ink);}
.spec-num,.spec-tag,.art-kind{color:var(--ink-2);}

/* kickers and the contact clock */
.art-kind{color:var(--ink-2);}
.contact-row time{color:var(--ink-2);}

/* ---------- interaction ----------
   Links hover to blue text. Hover is never the only signal - it does not
   exist on touch screens - so every link also reads as a link at rest
   (position in the nav, an underline, an arrow, or a whole card). */
@media (hover:hover){.index a:hover .idx-title,a.case:hover h3,a.card-b:hover h3,.rd-top nav a:hover,.nav a:hover,.mark:hover,.toc a:hover{color:var(--accent-text);}}
.rd-top nav a,.mark,.card-b h3{transition:color var(--hover-t) ease;}

/* the position marker in the table of contents is not text, but a lone warm
   line on an otherwise two-tone page reads as a leftover, so it matches */
/* the table of contents draws progress as a rail now (case-template.css) */

.btn{background:var(--ink);}
@media (hover:hover){.btn:hover{background:var(--ink-2);}}


/* focus stays visible and does not need a third colour */
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:3px;}


/* ---------- surfaces follow the palette ---------- */
html,body{background:var(--paper);}
main,main.short,main.flush{background:var(--paper);}
.ground{background:var(--ground);}
.claim{background:var(--paper);border-color:var(--rule);}
.cards.two .card{background:var(--sink);}
/* NOT .case-media{background:var(--sink)} — that would beat the per-card
   --case-field variable and flatten every preview to grey. The field default
   lives with the component. */
code,.cs-flow code,.section .body code{background:var(--sink);color:var(--ink);}
.cs-flow pre{background:var(--sink);border-color:var(--rule);}
@media (hover:hover){.cs-flow tbody tr:hover{background:var(--sink);}}
.cs-flow ul.bullets li::before{background:var(--marker);opacity:1;}
ul.points li::before{background:var(--marker);opacity:1;}
.cs-flow blockquote.quote{border-left-color:var(--rule-2);}