/* ═══════════════════════════════════════════════════════════════
   ANCHORBALL · KEN KELLEHER SCULPTURE
   DESIGN TOKENS — single source of truth for site-wide styles
   ═══════════════════════════════════════════════════════════════
   Edit the values in :root below. Every page that imports this
   file inherits the change. The live editor in
   website-styles.html lets you preview edits before committing.
   =============================================================== */

:root {
  /* ──  COLOR · INK & NEUTRAL ────────────────────────────────── */
  --c-ink:        #0A1628;  /* primary body text */
  --c-ink-soft:   #1E3A5F;  /* secondary body text */
  --c-mid:        #5A7A96;  /* muted meta text */
  --c-rule:       #C0D4E4;  /* default line rules */
  --c-mist:       #E2EDF5;  /* light divider */
  --c-ice:        #F0F5FA;  /* card/panel background */
  --c-white:      #FFFFFF;  /* canvas white */
  --c-cream:      #F5F0E8;  /* warm cream */

  /* ──  COLOR · BRAND ────────────────────────────────────────── */
  --c-ocean:      #006FA8;  /* primary brand blue · links & CTAs */
  --c-ocean-lt:   #0092D4;  /* brand blue hover / accent */
  --c-teal:       #007B8A;  /* secondary accent */
  --c-green:      #1D8A5E;  /* success / decorative */

  /* ──  COLOR · MATERIAL ACCENTS ─────────────────────────────── */
  --c-tan:        #E8D8BD;  /* exhibition tan */
  --c-tan-rule:   #C9B48F;  /* rule on tan surfaces */
  --c-violet:     #4A3F82;  /* low-orbit city violet */
  --c-pink:       #FF5A8C;  /* character-system pink */

  /* ──  TYPOGRAPHY · FAMILIES ────────────────────────────────── */
  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Poppins', sans-serif;

  /* ──  TYPOGRAPHY · WEIGHTS ─────────────────────────────────── */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   900;

  /* ──  TYPOGRAPHY · SIZE SCALE ──────────────────────────────── */
  --fs-hero:     clamp(44px, 7vw, 98px);   /* hero page headline */
  --fs-display:  clamp(36px, 5vw, 60px);   /* section display h2 */
  --fs-h2:       clamp(30px, 3.5vw, 44px); /* standard h2 */
  --fs-h3:       22px;                      /* card headline */
  --fs-h4:       17px;                      /* small headline */
  --fs-lead:     19px;                      /* intro / lead */
  --fs-body:     15px;                      /* body text */
  --fs-small:    13px;                      /* secondary */
  --fs-caption:  12px;                      /* captions */
  --fs-label:    10px;                      /* eyebrow labels */

  /* ──  LETTER SPACING ───────────────────────────────────────── */
  --ls-tight:  -0.035em;   /* hero */
  --ls-snug:   -0.02em;    /* display */
  --ls-normal: 0;           /* body */
  --ls-wide:    0.14em;    /* links */
  --ls-wider:   0.22em;    /* buttons */
  --ls-widest:  0.3em;     /* eyebrow labels */

  /* ──  LINE HEIGHT ──────────────────────────────────────────── */
  --lh-tight: 0.9;
  --lh-snug:  1.1;
  --lh-body:  1.75;

  /* ──  SPACE SCALE ──────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  80px;
  --sp-9:  100px;
  --sp-10: 140px;

  /* ──  RADIUS ───────────────────────────────────────────────── */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* ──  BORDERS & SHADOWS ────────────────────────────────────── */
  --border-thin:  1px solid var(--c-mist);
  --border-rule:  1px solid var(--c-rule);
  --shadow-card:  0 4px 16px rgba(10,22,40,0.06);
  --shadow-pop:   0 8px 32px rgba(10,22,40,0.12);

  /* ──  LAYOUT ───────────────────────────────────────────────── */
  --max-w:        1400px;
  --nav-h:        72px;
}