/* Kate Pincott — shared theme
   SINGLE SOURCE OF TRUTH for colour tokens + light/dark. Linked by every page.
   Change a colour here once and it updates across the whole site.
   (Fonts/spacing tokens still live per-page for now.) */

/* Dark-only for now: the site ships in dark mode everywhere. These neutral
   black/white/steel tokens are the default; the toggle is hidden (see bottom). */
:root{
  --bg: oklch(0.165 0 0);
  --surface: oklch(0.215 0 0);
  --fg: oklch(0.96 0 0);
  --fg-mute: oklch(0.72 0 0);
  --fg-faint: oklch(0.60 0 0);
  --line: oklch(0.34 0 0);
  --accent: oklch(0.66 0.006 255);
  --accent-soft: oklch(0.66 0.006 255 / 0.16);
  --accent-text: oklch(0.66 0.006 255);

  /* ---- Diagram pastels ----
     Fixed, on-brand palette for essay figures/diagrams (see DESIGN_SYSTEM §figures).
     Light pastels for the dark diagram card; text ON a pastel fill is --fig-ink
     (dark → legible). Restrained rule: pastel = meaning/category, structure stays
     neutral, one pastel per figure. NOT the random Prism — these are fixed. */
  --fig-blue: hsl(212 48% 80%);
  --fig-lilac: hsl(258 42% 81%);
  --fig-peach: hsl(20 58% 82%);
  --fig-mint: hsl(150 36% 78%);
  --fig-butter: hsl(46 55% 82%);
  --fig-ink: oklch(0.20 0 0);
}

/* ---- Dark theme (warm) ----
   Applies when the OS prefers dark and the user hasn't forced light, or when
   they pick dark via the toggle. Colour tokens only. */
:root[data-theme="dark"]{
  --bg: oklch(0.165 0 0);
  --surface: oklch(0.215 0 0);
  --fg: oklch(0.96 0 0);
  --fg-mute: oklch(0.72 0 0);
  --fg-faint: oklch(0.60 0 0);
  --line: oklch(0.34 0 0);
  --accent: oklch(0.66 0.006 255);
  --accent-soft: oklch(0.66 0.006 255 / 0.16);
  --accent-text: oklch(0.66 0.006 255);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: oklch(0.165 0 0);
    --surface: oklch(0.215 0 0);
    --fg: oklch(0.96 0 0);
    --fg-mute: oklch(0.72 0 0);
    --fg-faint: oklch(0.60 0 0);
    --line: oklch(0.34 0 0);
    --accent: oklch(0.66 0.006 255);
    --accent-soft: oklch(0.66 0.006 255 / 0.16);
    --accent-text: oklch(0.66 0.006 255);
  }
}

/* ---- Content links (global) ----
   Inline hyperlinks in page content keep the reading colour with a steel
   underline; on hover they PRISM (text + underline take a random pastel — see
   §Prism). Never the browser's default blue/purple, never a purple :visited.
   Scoped to <main> so it can't touch the nav or footer. Component links
   (.btn, .card, .contact-cta) set their own colour and out-specify this. */
main a,
main a:visited{
  color:var(--fg);                              /* link text stays the normal reading colour */
  text-decoration:underline;
  text-decoration-color:var(--accent);          /* steel underline — signals interaction */
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  transition:color .16s ease,text-decoration-color .16s ease;
}
main a:hover{color:var(--accent);text-decoration-color:var(--accent)}  /* hover draws a random pastel */

/* ---- Theme toggle button (nav) ---- */
nav.top .brand{margin-right:auto}
/* Dark-only for now: toggle hidden site-wide. Remove this override to bring it back. */
.theme-toggle{ display:none !important; }
.theme-toggle{
  order:99; /* sit at the far right, after the Contact button */
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;margin-left:16px;padding:0;
  font-size:15px;line-height:1;color:var(--fg-mute);
  background:transparent;border:1px solid var(--line);border-radius:50%;
  cursor:pointer;transition:border-color .16s ease,color .16s ease;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent-text)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* 44px touch target: extend the hit area past the 28px visual ring */
.theme-toggle{position:relative}
.theme-toggle::after{content:"";position:absolute;inset:-8px;border-radius:50%}
/* Mobile: the hamburger sits 6px to the left — keep the 44px width but shift
   the overlay right so the two hit areas don't overlap */
@media (max-width: 720px){
  .theme-toggle::after{left:-3px;right:-13px}
}
.theme-toggle .ic-dark{display:none}
:root[data-theme="dark"] .theme-toggle .ic-dark{display:inline}
:root[data-theme="dark"] .theme-toggle .ic-light{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .ic-dark{display:inline}
  :root:not([data-theme="light"]) .theme-toggle .ic-light{display:none}
}

/* Client logos are black monochrome SVGs — dark-only site, so flip them white
   unconditionally (not gated on data-theme/OS, which left them black for
   light-OS visitors of the forced-dark site). */
.client-logo{filter:invert(1) brightness(0.96)}

/* Text selection — a clearly visible highlight in both themes. Overrides the
   faint per-page ::selection (16% wash) that was invisible on the dark bg. */
::selection{background:color-mix(in oklch, var(--accent) 35%, transparent)!important;color:var(--fg)!important}

/* ---- Global buttons ----
   Primary (.btn): filled, matches nav.contact-cta. Secondary (.btn-ghost): stroked,
   never filled. Both start as a rounded rectangle and become a pill on hover —
   reuse these classes for any new CTA rather than reinventing the shape. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:0;
  padding:13px 26px;border-radius:4px;border:none;
  background:var(--fg);color:var(--bg);cursor:pointer;text-decoration:none;
  transition:border-radius .18s ease-out,background-color .18s ease,color .18s ease;
}
.btn:hover{background:var(--accent);color:var(--bg);border-radius:999px}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:0;
  padding:13px 26px;border-radius:4px;border:1px solid var(--line);
  background:transparent;color:var(--fg);cursor:pointer;text-decoration:none;
  transition:border-radius .18s ease-out,border-color .18s ease,color .18s ease;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-text);border-radius:999px}
.btn-ghost:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .btn,.btn-ghost{transition:none}
}

/* Breadcrumb / back links (.essay-back — "← All writing/thinking") underline on hover.
   Global pattern: any back-nav breadcrumb gets an underline cue in addition to the colour shift. */
.essay-back:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ================================ PRISM =================================
   The site's signature interaction. Steel/white at rest; on hover, any
   interactive element draws ONE fresh random pastel. motion.js writes that
   pastel straight into the accent tokens (--accent / --accent-text /
   --accent-soft) on the hovered element and clears it on mouse-out — so every
   existing var(--accent) hover rule across the site "prisms" with no
   per-component CSS. On light-filled surfaces route it to fill/border, not text.
   The `.prism` class opts an element in (base = the steel accent); `.prism-rand`
   is a word that has no base accent (e.g. white headline words). See DESIGN_SYSTEM §Prism. */
.prism{ color:var(--accent); -webkit-text-fill-color:var(--accent); }   /* title accent word: steel at rest */
.prism, .prism-rand{ transition:color .25s ease, -webkit-text-fill-color .25s ease; }
.prism:hover, .prism:focus-visible,
.prism-rand:hover, .prism-rand:focus-visible{
  color:var(--accent); -webkit-text-fill-color:var(--accent);
}
@media (prefers-reduced-motion: reduce){
  .prism, .prism-rand{ transition:none; }
}