/* ═══════════════════════════════════════════════════════════════════════
   Site tokens · ethan-mcnamara.com

   Light first. White paper, a slight lavender in the tinted surfaces,
   near-black text, and one indigo that does all the pointing. Dark is a
   complete alternative, made by redefining these same tokens.

   Geist and Geist Mono throughout. Caveat appears only as a margin note
   — a hand annotating the work — never as interface text.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── surface ─────────────────────────────────────────────────────── */
  --ground:      #ffffff;
  --paper:       #ffffff;
  --paper-2:     #f7f8fc;
  --paper-3:     #eef0f9;
  --paper-ink:   #0d1220;

  /* ── ink ─────────────────────────────────────────────────────────── */
  --ink:         #0f1729;
  --ink-2:       #4a5468;
  --graphite:    #6b7489;

  /* ── accent ──────────────────────────────────────────────────────── */
  --accent:      #4f46e5;
  --accent-2:    #4338ca;
  --accent-soft: #eef0fe;
  --accent-line: #d7d9fb;

  /* ── line ────────────────────────────────────────────────────────── */
  --rule:        #e3e6f0;
  --rule-soft:   #edeff6;
  --rule-strong: #c9cee0;

  --focus:       #4f46e5;

  /* ── type ────────────────────────────────────────────────────────── */
  --ui:    "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hand:  "Caveat", "Segoe Script", "Bradley Hand", cursive;

  --t-display: clamp(2.5rem, 1.7rem + 3.4vw, 4rem);
  --t-page:    clamp(2rem, 1.5rem + 2.1vw, 3rem);
  --t-card:    clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
  --t-section: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --t-heading: 1.125rem;
  --t-prose:   1.0625rem;
  --t-body:    1rem;
  --t-small:   0.9375rem;
  --t-caption: 0.8125rem;
  --t-machine: 0.75rem;
  --t-eyebrow: 0.6875rem;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.55;
  --lh-prose: 1.65;

  /* ── space (base four) ───────────────────────────────────────────── */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s7: 32px;  --s8: 40px;
  --s9: 48px;  --s10: 64px; --s11: 80px; --s12: 96px; --s13: 128px;

  --gutter: 24px;
  --container: 1120px;
  --wide: 1280px;
  --section-gap: clamp(64px, 8vw, 112px);

  /* ── shape ───────────────────────────────────────────────────────── */
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* ── motion ──────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --d-press:   120ms;
  --d-reveal:  150ms;
  --d-hover:   160ms;
  --d-arrive:  220ms;
  --d-page:    240ms;
  --arrive-shift: 6px;

  /* ── elevation ───────────────────────────────────────────────────── */
  --shadow-card:   0 1px 2px rgba(15 23 41 / 0.04), 0 8px 24px -12px rgba(15 23 41 / 0.10);
  --shadow-lift:   0 1px 2px rgba(15 23 41 / 0.05), 0 16px 40px -16px rgba(15 23 41 / 0.16);
  --shadow-dialog: 0 2px 4px rgba(15 23 41 / 0.06), 0 32px 64px -24px rgba(15 23 41 / 0.28);

  /* Colours belonging to the work, not to this site. They do not follow
     the theme, because the work does not. */
  --film-ground: #151515;
  --film-ground-deep: #0e0e0e;
  --view-ground: #111111;
  --lens-note-bg: rgba(8 8 8 / 0.94);
  --lens-design: #8b86f5;
  --lens-design-ink: #d9d5ff;
  --lens-design-strong: #b9b4ff;
  --lens-system-ink: #e4e4e4;
  --lens-system-strong: #ffffff;
  --lens-grip-ink: #ededed;
  --signal-indigo: #4f46e5;

  /* the code panel on the home page: a dark editor, fixed in both themes */
  --code-line:   #1c2436;
  --code-tab:    #161d2e;
  --code-tab-on: #e8ecf6;
  --code-tab-off:#74809a;
  --code-text:   #b6c0d4;
  --code-key:    #b3a6ff;
  --code-fn:     #7fb2ff;
  --code-str:    #86d3a6;
  --code-com:    #6b7794;
  --code-prop:   #e0a679;
}

[data-theme="dark"] {
  color-scheme: dark;

  --ground:      #0b0e16;
  --paper:       #10141f;
  --paper-2:     #161b28;
  --paper-3:     #1d2333;
  --paper-ink:   #080b13;

  --ink:         #eef1f8;
  --ink-2:       #a3adc2;
  --graphite:    #7c8699;

  --accent:      #8b86f5;
  --accent-2:    #a5a1f8;
  --accent-soft: #1a1d38;
  --accent-line: #2e3358;

  --rule:        #232a3a;
  --rule-soft:   #1a2030;
  --rule-strong: #39415a;

  --focus:       #8b86f5;

  --shadow-card:   0 1px 2px rgba(0 0 0 / 0.4), 0 8px 24px -12px rgba(0 0 0 / 0.6);
  --shadow-lift:   0 1px 2px rgba(0 0 0 / 0.5), 0 16px 40px -16px rgba(0 0 0 / 0.7);
  --shadow-dialog: 0 2px 4px rgba(0 0 0 / 0.5), 0 32px 64px -24px rgba(0 0 0 / 0.8);
}

/* ── fonts ────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist.46525b05.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono.3ef2c50d.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("/assets/fonts/Caveat-latin.891951df.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Geist Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 100.6%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Consolas"), local("Menlo"), local("Courier New");
  size-adjust: 96%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}