/* ============================================================
   COLOR TOKENS — Steven Russon Design System
   Warm, calm neutral base with a curated pastel/neon accent set
   pulled from the brand color-scheme moodboard.
   ============================================================ */

:root {
  /* ---- Base neutrals ---- */
  --neutral-white: #ffffff;
  --neutral-100: #f0efed;   /* main background */
  --neutral-200: #b8b8b8;
  --neutral-400: #737373;
  --neutral-900: #2b2b2b;   /* primary text / ink */

  /* ---- Accent / highlight palette (call-outs, decoration, tags) ---- */
  --accent-cream: #fff6eb;     /* warm paper */
  --accent-mist: #f0efed;      /* == neutral-100, listed for parity with source palette */
  --accent-periwinkle: #dce1fd; /* text-on-dark, cool tint */
  --accent-lilac: #c4b4fe;
  --accent-lime: #e8fd9d;
  --accent-sage: #a8e27c;
  --accent-green: #61b959;
  --accent-peach: #fed5c4;
  --accent-coral: #fda57f;

  /* ---- Semantic surface + text aliases ---- */
  --surface-page: var(--neutral-100);
  --surface-raised: var(--neutral-white);
  --surface-dark: var(--neutral-900);
  --surface-card: var(--neutral-white);

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-400);
  --text-muted: var(--neutral-200);
  --text-on-dark: var(--accent-periwinkle);
  --text-on-dark-muted: color-mix(in oklab, var(--accent-periwinkle) 55%, transparent);
  --text-inverse: var(--neutral-white);

  --border-subtle: color-mix(in oklab, var(--neutral-900) 12%, transparent);
  --border-on-dark: color-mix(in oklab, var(--neutral-white) 18%, transparent);

  /* ---- Accent-to-purpose aliases (pick meaning, not just color) ---- */
  --accent-primary: var(--accent-green);     /* links, active states, key actions */
  --accent-primary-strong: #4fa347;          /* hover/pressed shade of accent-green */
  --accent-highlight: var(--accent-lime);    /* underlines, tag fills, emphasis marks */
  --accent-warm: var(--accent-coral);        /* warm call-outs */
  --accent-cool: var(--accent-lilac);        /* cool call-outs */

  --focus-ring: var(--neutral-900);

  /* ---- Glass surfaces — frosted floating chrome (nav, overlays) ---- */
  --surface-glass: color-mix(in oklab, var(--neutral-white) 58%, transparent);
  --surface-glass-dark: color-mix(in oklab, var(--neutral-900) 55%, transparent);
  --border-glass: color-mix(in oklab, var(--neutral-white) 55%, transparent);
  --blur-glass: blur(20px) saturate(160%); /* @kind other */

  /* ---- Aurora — slow-drifting background gradient (purple/green/graphite) ---- */
  --aurora-purple: color-mix(in oklab, var(--accent-lilac) 70%, transparent);
  --aurora-green: color-mix(in oklab, var(--accent-sage) 65%, transparent);
  --aurora-graphite: color-mix(in oklab, var(--neutral-900) 40%, transparent);
  --aurora-peach: color-mix(in oklab, var(--accent-peach) 65%, transparent);

  /* ---- Dark hero surface (deep graphite-purple, for aurora-on-dark scenes) ---- */
  --surface-hero-dark: #16141c;
}