/* ==========================================================================
   Podium Design System — Design Tokens
   tokens.css
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     Colors — Brand Palette
     -------------------------------------------------------------------------- */

  /* Backgrounds */
  --color-bg-primary:      #ffffff;
  --color-bg-secondary:    #f4f4f5;   /* zinc-100 */
  --color-bg-card:         #ffffff;

  /* Text */
  --color-text-primary:    #18181b;   /* zinc-900 */
  --color-text-secondary:  #71717a;   /* zinc-500 */

  /* Accent / Brand */
  --color-accent-primary:  #a3622d;   /* bronze-dark */
  --color-accent-hover:    #d97706;   /* amber-600 */

  /* Podium tier colors */
  --color-gold:            #d97706;   /* amber-600  — 1st place */
  --color-silver:          #64748b;   /* slate-500  — 2nd place */
  --color-bronze:          #a3622d;   /* custom     — 3rd place */

  /* Semantic */
  --color-success:         #059669;   /* emerald-600 */
  --color-danger:          #dc2626;   /* red-600     */
  --color-warning:         #d97706;   /* amber-600   */

  /* Borders */
  --color-border:          #e4e4e7;   /* zinc-200 */
  --color-border-subtle:   #f4f4f5;   /* zinc-100 */

  /* --------------------------------------------------------------------------
     Typography — Font Family Tokens
     -------------------------------------------------------------------------- */

  --font-display: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Mono', 'Cascadia Code', monospace;

  /* --------------------------------------------------------------------------
     Spacing Scale — 0.25rem increments
     --space-N = N * 0.25rem
     -------------------------------------------------------------------------- */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-9:   2.25rem;   /* 36px */
  --space-10:  2.5rem;    /* 40px */
  --space-11:  2.75rem;   /* 44px */
  --space-12:  3rem;      /* 48px */
  --space-13:  3.25rem;   /* 52px */
  --space-14:  3.5rem;    /* 56px */
  --space-15:  3.75rem;   /* 60px */
  --space-16:  4rem;      /* 64px */
  --space-17:  4.25rem;   /* 68px */
  --space-18:  4.5rem;    /* 72px */
  --space-19:  4.75rem;   /* 76px */
  --space-20:  5rem;      /* 80px */

  /* --------------------------------------------------------------------------
     Border Radius
     -------------------------------------------------------------------------- */

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     Shadows — tuned for light backgrounds
     -------------------------------------------------------------------------- */

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg:  0 10px 32px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);

  /* --------------------------------------------------------------------------
     Transitions
     -------------------------------------------------------------------------- */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

  /* --------------------------------------------------------------------------
     Z-index Scale
     -------------------------------------------------------------------------- */

  --z-nav:   100;
  --z-modal: 200;
  --z-toast: 300;

  /* --------------------------------------------------------------------------
     Typography Scale
     -------------------------------------------------------------------------- */

  --font-size-section-headline: 2.5rem;
  --font-size-subsection:       1.75rem;
  --font-size-body:             1rem;
  --font-size-data-label:       0.75rem;
  --font-size-data-value:       1.5rem;
  --font-size-cta:              1.125rem;

  /* --------------------------------------------------------------------------
     Card System
     -------------------------------------------------------------------------- */

  --card-primary-bg:      #f9fafb;
  --card-primary-border:  var(--color-accent-primary);
  --card-primary-shadow:  var(--shadow-lg);
  --card-secondary-bg:    #ffffff;
  --card-secondary-shadow: var(--shadow-sm);

  /* --------------------------------------------------------------------------
     Additional Z-index
     -------------------------------------------------------------------------- */

  --z-progress:   150;
  --z-sticky-cta: 90;
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */

[data-theme="dark"] {
  --color-bg-primary:      #09090b;   /* zinc-950 */
  --color-bg-secondary:    #18181b;   /* zinc-900 */
  --color-bg-card:         #27272a;   /* zinc-800 */
  --color-text-primary:    #fafafa;   /* zinc-50  */
  --color-text-secondary:  #a1a1aa;   /* zinc-400 */
  --color-border:          #3f3f46;   /* zinc-700 */
  --color-border-subtle:   #27272a;   /* zinc-800 */
  --color-accent-primary:  #c2783c;   /* bronze */
  --color-accent-hover:    #f59e0b;   /* gold */
  --color-gold:            #f59e0b;   /* amber-500 */
  --color-silver:          #94a3b8;   /* slate-400 */
  --color-bronze:          #c2783c;
  --color-success:         #10b981;   /* emerald-500 */
  --color-danger:          #ef4444;   /* red-500 */
  --color-warning:         #f59e0b;
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 10px 32px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.45);
  --card-primary-bg:      var(--color-bg-secondary);
  --card-primary-border:  var(--color-accent-primary);
  --card-secondary-bg:    var(--color-bg-card);
}