/*
 * sporeus-tokens.css — Design Token System v1.0.0
 * Sporeus.com — Turkish Sports Science Blog (Astra child theme "sporeus-terminal")
 * Session 1 of 8-session theme unification project
 *
 * Structure:
 *   A. Primitive Color Palette
 *   B. Semantic Color Tokens
 *   C. Dark Mode Semantic Overrides
 *   D. Typography Tokens
 *   E. Spacing (8-point grid)
 *   F. Layout
 *   G. Radius, Shadows, Motion, Z-index
 *   Z. Backward-compat aliases
 */

/* ═══════════════════════════════════════════════════════════════════════════
   A. PRIMITIVE COLOR PALETTE
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Navy scale (10 steps, derived from #1a2847) ── */
  /* #1a2847 is navy-700 anchor; scale goes lightest→darkest */
  --c-navy-50:  #eef1f7;
  --c-navy-100: #d5dcea;
  --c-navy-200: #b3c0d8;
  --c-navy-300: #8da1c2;
  --c-navy-400: #6a82ad;
  --c-navy-500: #4d6696;
  --c-navy-600: #384f7a;
  --c-navy-700: #1a2847; /* ← brand anchor */
  --c-navy-800: #151f39;
  --c-navy-900: #0f172a;
  --c-navy-950: #080d18;

  /* ── Gold scale (10 steps, derived from #c9a961) ── */
  /* #c9a961 is gold-500 anchor */
  --c-gold-50:  #fdf8ed;
  --c-gold-100: #f7ead0;
  --c-gold-200: #f0d9a8;
  --c-gold-300: #e6c47e;
  --c-gold-400: #d8b36a;
  --c-gold-500: #c9a961; /* ← brand anchor */
  --c-gold-600: #b08f45;
  --c-gold-700: #8f7233;
  --c-gold-800: #6b5426;
  --c-gold-900: #4a3a1a;
  --c-gold-950: #2a200e;

  /* ── Neutral scale (11 steps) ── */
  --c-neutral-0:   #ffffff;
  --c-neutral-50:  #faf9f7;
  --c-neutral-100: #f0ebe2; /* = cream2 */
  --c-neutral-200: #e8e2d9; /* = border */
  --c-neutral-300: #d4ccbf;
  --c-neutral-400: #b5aa9a;
  --c-neutral-500: #8a7f72;
  --c-neutral-600: #6b6560; /* = muted */
  --c-neutral-700: #4a4540;
  --c-neutral-800: #2d2820;
  --c-neutral-900: #1a1a1a; /* = text */
  --c-neutral-950: #0d0d0d;

  /* ── Semantic / Status colors ── */

  /* Success */
  --c-success-100:  #d1f5e0;
  --c-success-600:  #16a34a;
  --c-success-text: #14532d;

  /* Warning */
  --c-warning-100:  #fef3c7;
  --c-warning-600:  #d97706;
  --c-warning-text: #78350f;

  /* Error */
  --c-error-100:  #fee2e2;
  --c-error-600:  #dc2626;
  --c-error-text: #7f1d1d;

  /* Info */
  --c-info-100:  #dbeafe;
  --c-info-600:  #2563eb;
  --c-info-text: #1e3a8a;

  /* ── Data palette (6 colors for charts — sports data context) ── */
  --c-data-1: #2563eb; /* effort zones  — blue    */
  --c-data-2: #16a34a; /* aerobic       — green   */
  --c-data-3: #ca8a04; /* threshold     — amber   */
  --c-data-4: #dc2626; /* anaerobic     — red     */
  --c-data-5: #7c3aed; /* VO₂max        — purple  */
  --c-data-6: #0891b2; /* recovery      — cyan    */

/* ═══════════════════════════════════════════════════════════════════════════
   B. SEMANTIC COLOR TOKENS (reference primitives)
   ═══════════════════════════════════════════════════════════════════════════ */

  /* ── Surfaces ── */
  --color-bg-base:     var(--c-neutral-0);
  --color-bg-elevated: var(--c-neutral-50);
  --color-bg-sunken:   var(--c-neutral-100);

  /* ── Text ── */
  --color-text-primary:    var(--c-neutral-900);
  --color-text-secondary:  var(--c-neutral-700);
  --color-text-muted:      var(--c-neutral-600);
  --color-text-inverse:    var(--c-neutral-0);
  --color-text-link:       var(--c-navy-700);
  --color-text-link-hover: var(--c-gold-600);

  /* ── Borders ── */
  --color-border-subtle:  var(--c-neutral-200);
  --color-border-default: var(--c-neutral-300);
  --color-border-strong:  var(--c-neutral-500);

  /* ── Component surfaces ── */
  --color-surface-card:  var(--c-neutral-0);
  --color-surface-data:  var(--c-neutral-50);
  --color-surface-quote: var(--c-neutral-100);

  /* ── Actions ── */
  --color-action-primary:         var(--c-navy-700);
  --color-action-primary-hover:   var(--c-navy-800);
  --color-action-secondary:       var(--c-gold-500);
  --color-action-secondary-hover: var(--c-gold-600);
  --color-action-ghost:           transparent;
  --color-action-ghost-hover:     var(--c-neutral-100);

/* ═══════════════════════════════════════════════════════════════════════════
   D. TYPOGRAPHY TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

  /* ── Font families ── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ── Type scale ── */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: clamp(2.5rem, 5vw, 3rem);
  --fs-60: clamp(3rem, 6vw, 3.75rem);
  --fs-72: clamp(3.5rem, 7vw, 4.5rem);
  --fs-96: clamp(4rem, 8vw, 6rem);

  /* ── Line heights ── */
  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;
  --lh-loose:   2;

  /* ── Letter spacing ── */
  --ls-tight:   -0.025em;
  --ls-normal:   0em;
  --ls-wide:     0.05em;
  --ls-widest:   0.1em;

  /* ── Font weights ── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

/* ═══════════════════════════════════════════════════════════════════════════
   E. SPACING (8-point grid)
   ═══════════════════════════════════════════════════════════════════════════ */

  --space-0:  0;
  --space-1:  0.125rem;  /*   2px */
  --space-2:  0.25rem;   /*   4px */
  --space-3:  0.5rem;    /*   8px */
  --space-4:  0.75rem;   /*  12px */
  --space-5:  1rem;      /*  16px */
  --space-6:  1.25rem;   /*  20px */
  --space-7:  1.5rem;    /*  24px */
  --space-8:  2rem;      /*  32px */
  --space-9:  2.5rem;    /*  40px */
  --space-10: 3rem;      /*  48px */
  --space-11: 4rem;      /*  64px */
  --space-12: 5rem;      /*  80px */
  --space-13: 6rem;      /*  96px */
  --space-14: 8rem;      /* 128px */
  --space-15: 12rem;     /* 192px */
  --space-16: 16rem;     /* 256px */

/* ═══════════════════════════════════════════════════════════════════════════
   F. LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

  --container-narrow:  640px;
  --container-default: 760px;
  --container-wide:    1080px;
  --container-full:    1280px;

  --measure-tight:   60ch;
  --measure-default: 72ch;
  --measure-relaxed: 80ch;

/* ═══════════════════════════════════════════════════════════════════════════
   G. RADIUS
   ═══════════════════════════════════════════════════════════════════════════ */

  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

/* ═══════════════════════════════════════════════════════════════════════════
   G. SHADOWS (light mode — navy-tinted)
   ═══════════════════════════════════════════════════════════════════════════ */

  --shadow-xs:  0 1px 2px rgba(26,40,71,.04);
  --shadow-sm:  0 1px 4px rgba(26,40,71,.06), 0 1px 2px rgba(26,40,71,.04);
  --shadow-md:  0 4px 8px rgba(26,40,71,.08), 0 2px 4px rgba(26,40,71,.04);
  --shadow-lg:  0 8px 20px rgba(26,40,71,.10), 0 4px 8px rgba(26,40,71,.05);
  --shadow-xl:  0 16px 40px rgba(26,40,71,.12), 0 8px 16px rgba(26,40,71,.06);
  --shadow-2xl: 0 24px 64px rgba(26,40,71,.16), 0 12px 24px rgba(26,40,71,.08);

/* ═══════════════════════════════════════════════════════════════════════════
   G. MOTION
   ═══════════════════════════════════════════════════════════════════════════ */

  --duration-instant: 0ms;
  --duration-fast:    100ms;
  --duration-default: 200ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --easing-out:     cubic-bezier(0, 0, 0.2, 1);
  --easing-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

/* ═══════════════════════════════════════════════════════════════════════════
   G. Z-INDEX
   ═══════════════════════════════════════════════════════════════════════════ */

  --z-below:   -1;
  --z-base:     0;
  --z-raised:   1;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
  --z-max:      9999;

} /* end :root */

/* ═══════════════════════════════════════════════════════════════════════════
   C. DARK MODE SEMANTIC OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {

  /* ── Surfaces ── */
  --color-bg-base:     #0f1117;
  --color-bg-elevated: #1a1f2e;
  --color-bg-sunken:   #151a27;

  /* ── Text ── */
  --color-text-primary:    #e8e2d9;
  --color-text-secondary:  #c4bdb4;
  --color-text-muted:      #8a8078;
  --color-text-inverse:    #0f1117;
  --color-text-link:       #c9a961;
  --color-text-link-hover: #e2c97e;

  /* ── Borders ── */
  --color-border-subtle:  #2d2820;
  --color-border-default: #3d3530;
  --color-border-strong:  #6b6560;

  /* ── Component surfaces ── */
  --color-surface-card:  #1e2435;
  --color-surface-data:  #1a1f2e;
  --color-surface-quote: #2a2420;

  /* ── Actions ── */
  --color-action-primary:         #c9a961;
  --color-action-primary-hover:   #e2c97e;
  --color-action-secondary:       var(--c-navy-600);
  --color-action-secondary-hover: var(--c-navy-500);
  --color-action-ghost:           transparent;
  --color-action-ghost-hover:     rgba(255,255,255,.06);

  /* ── Shadows (dark mode — deeper blacks) ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.20);
  --shadow-sm:  0 1px 4px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.20);
  --shadow-md:  0 4px 8px rgba(0,0,0,.32), 0 2px 4px rgba(0,0,0,.24);
  --shadow-lg:  0 8px 20px rgba(0,0,0,.36), 0 4px 8px rgba(0,0,0,.28);
  --shadow-xl:  0 16px 40px rgba(0,0,0,.40), 0 8px 16px rgba(0,0,0,.32);
  --shadow-2xl: 0 24px 64px rgba(0,0,0,.50), 0 12px 24px rgba(0,0,0,.40);

  /* ── Backward-compat aliases in dark mode ── */
  --cream:  #151210;
  --cream2: #1e1a16;
  --text:   #e8e2d9;
  --muted:  #9a9088;
  --border: #2d2820;

}

/* ═══════════════════════════════════════════════════════════════════════════
   Z. BACKWARD-COMPAT ALIASES
   Existing theme CSS uses these short names — keep them pointing at tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --navy:   var(--c-navy-700);
  --gold:   var(--c-gold-500);
  --cream:  var(--color-bg-elevated);
  --cream2: var(--color-bg-sunken);
  --text:   var(--color-text-primary);
  --muted:  var(--color-text-muted);
  --border: var(--color-border-subtle);
}