/* ==========================================================================
   xophersean.com — design tokens
   Direction: "Aurelian" — white ground, gold + deep teal-green accents,
   DM Serif Display (headlines) + DM Sans (body/UI) + JetBrains Mono
   (labels/tags/code only). Clean break from Earthseed's cobalt/teal system.
   Source: Claude Design handoff, "Xophersean Design System.dc.html" (3a).
   ========================================================================== */

:root {

  /* ---- Color: surfaces (neutral — cooled from the original warm-tinted
     mockup values per feedback that it read too close to Claude's own
     cream/sepia surfaces) ---- */
  --bg:               oklch(99.5% 0 0);   /* pure white — page background */
  --surface-raised:   oklch(97%   0 0);   /* neutral grey — cards, strips, nav-mobile */
  --surface-sunken:   oklch(95%   0 0);   /* neutral grey — subtle inset panels */

  /* ---- Color: text ---- */
  --ink:              oklch(19%   0.006 90);   /* #1C1C1A — headings, body */
  --ink-muted:         oklch(38%  0.01  90);    /* #4A483F — secondary body text */
  --ink-faint:         oklch(58%  0.01  90);    /* #8A887C — labels, meta, captions */

  /* ---- Color: accents (use sparingly — never as backgrounds for large areas) ---- */
  --accent-gold:       oklch(63% 0.13 75);      /* #B8862E — primary accent: CTAs-in-outline, links, highlights */
  --accent-gold-ink:    #7A5A1D;                 /* darker gold for text-on-white contrast if needed */
  --accent-teal:       oklch(40% 0.07 165);     /* #1F5C4E — secondary accent: primary buttons, active states */
  --accent-teal-deep:   oklch(32% 0.06 165);    /* hover state for teal elements */

  /* ---- Color: structure ---- */
  --rule:              oklch(90% 0.004 90);     /* #E4E2DC — dividers, borders, grid lines */
  --rule-strong:       oklch(82% 0.004 90);     /* emphasis dividers */

  /* ---- Type families ---- */
  --font-display: 'DM Serif Display', Georgia, serif;   /* headlines only (h1–h3) */
  --font-body:    'DM Sans', -apple-system, sans-serif; /* body copy, nav, buttons, UI chrome */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace; /* labels, tags, eyebrows, code, dates */

  /* ---- Type scale ---- */
  --text-display-xl: 700 48px/1.1  var(--font-display); /* hero headline */
  --text-display-lg: 400 40px/1.15 var(--font-display); /* section headline */
  --text-display-md: 400 28px/1.2  var(--font-display); /* card / subsection title */
  --text-display-sm: 400 21px/1.3  var(--font-display); /* nav wordmark, small headers */
  --text-body-lg:     400 16px/1.7 var(--font-body);    /* lead paragraph */
  --text-body:        400 15px/1.7 var(--font-body);    /* standard paragraph */
  --text-body-sm:     500 13px/1.5 var(--font-body);    /* nav links, buttons, meta */
  --text-label:       500 11px/1.4 var(--font-mono);    /* eyebrows, tags, dates — uppercase, tracked */

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius ---- */
  --radius-sm: 2px;   /* tags, badges */
  --radius-md: 4px;   /* buttons, inputs */
  --radius-lg: 8px;   /* cards (used sparingly — this system favors square-cornered cards with rules) */
  --radius-pill: 999px; /* headshot, dot indicators */

  /* ---- Shadow ---- */
  --shadow-headshot: 0 10px 24px rgba(28, 28, 26, 0.14);
  --shadow-card-hover: 0 4px 16px rgba(28, 28, 26, 0.08);

  /* ---- Layout (added for site implementation — not in original mockup) ---- */
  --max-width:     1040px;
  --content-width: 680px;
  --padding-page:  clamp(20px, 5vw, 40px);
}