/* SquadPicks frontend - tokens.css */
/* Design tokens via CSS Custom Properties.
 * Palette: slate + emerald (Linear/Stripe-grade professional system).
 * Changing a value here ripples across the entire frontend. */

:root {
  /* ============================================================
   * Slate scale (neutral spine)
   * ============================================================ */
  --color-slate-50:       #f8fafc;
  --color-slate-100:      #f1f5f9;
  --color-slate-200:      #e2e8f0;
  --color-slate-300:      #cbd5e1;
  --color-slate-400:      #94a3b8;
  --color-slate-500:      #64748b;
  --color-slate-600:      #475569;
  --color-slate-700:      #334155;
  --color-slate-800:      #1e293b;
  --color-slate-900:      #0f172a;

  /* ============================================================
   * Emerald scale (brand accent)
   * ============================================================ */
  --color-emerald-400:    #34d399;
  --color-emerald-500:    #10b981;
  --color-emerald-600:    #059669;
  --color-teal-700:       #0f766e;

  /* ============================================================
   * Semantic colors (legacy names kept for cross-page compatibility)
   * ============================================================ */
  --color-primary:        var(--color-emerald-500);
  --color-primary-dark:   var(--color-emerald-600);
  --color-secondary:      var(--color-teal-700);
  --color-accent:         var(--color-emerald-400);
  --color-accent-pink:    #f87171;        /* repurposed: warm sport tag */
  --color-success:        var(--color-emerald-500);
  --color-warning:        #f59e0b;
  --color-danger:         #dc2626;
  --color-info:           #06b6d4;

  /* Sport-specific tag tints (overlaid on dark cards) */
  --sport-soccer:         var(--color-emerald-500);
  --sport-soccer-dark:    var(--color-emerald-600);
  --sport-nfl:            #ef4444;
  --sport-nfl-dark:       #b91c1c;
  --sport-nba:            #f97316;
  --sport-nba-dark:       #c2410c;
  --sport-ncaa:           #3b82f6;
  --sport-ncaa-dark:      #1d4ed8;
  --sport-tag-soccer-fg:  #34d399;
  --sport-tag-soccer-bg:  rgba(16, 185, 129, 0.15);
  --sport-tag-nfl-fg:     #f87171;
  --sport-tag-nfl-bg:     rgba(239, 68, 68, 0.15);
  --sport-tag-nba-fg:     #fb923c;
  --sport-tag-nba-bg:     rgba(249, 115, 22, 0.15);
  --sport-tag-ncaa-fg:    #60a5fa;
  --sport-tag-ncaa-bg:    rgba(59, 130, 246, 0.15);

  /* Gradients (Notify CTA + decorative) */
  --gradient-cta:         linear-gradient(135deg, var(--color-emerald-500) 0%, var(--color-teal-700) 100%);
  --gradient-accent:      linear-gradient(135deg, var(--color-emerald-400) 0%, var(--color-emerald-600) 100%);

  /* ============================================================
   * Text + background semantic colors
   * ============================================================ */
  --color-text:               var(--color-slate-800);
  --color-text-strong:        var(--color-slate-900);
  --color-text-muted:         var(--color-slate-500);
  --color-text-on-dark:       #ffffff;
  --color-text-on-dark-muted: var(--color-slate-300);

  --color-bg:             var(--color-slate-50);
  --color-bg-elevated:    #ffffff;
  --color-bg-tinted:      var(--color-slate-100);
  --color-bg-dark:        var(--color-slate-900);
  --color-bg-overlay:     rgba(15, 23, 42, 0.55);

  --color-border:         var(--color-slate-200);
  --color-border-strong:  var(--color-slate-300);
  --color-border-on-dark: rgba(255, 255, 255, 0.12);

  /* Pool tier colors (used in badges/cards) */
  --tier-free:            var(--color-slate-500);
  --tier-standard:        var(--color-emerald-500);
  --tier-premium:         #8b5cf6;
  --tier-platinum:        #f59e0b;

  /* Leaderboard rank highlights */
  --rank-gold:            #ffd700;
  --rank-silver:          #c0c0c0;
  --rank-bronze:          #cd7f32;

  /* ============================================================
   * Typography
   * ============================================================ */
  --font-family-base:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                          Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono:     "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --font-size-xs:         0.75rem;    /* 12px */
  --font-size-sm:         0.875rem;   /* 14px */
  --font-size-base:       1rem;       /* 16px */
  --font-size-lg:         1.125rem;   /* 18px */
  --font-size-xl:         1.25rem;    /* 20px */
  --font-size-2xl:        1.5rem;     /* 24px */
  --font-size-3xl:        1.875rem;   /* 30px */
  --font-size-4xl:        2.5rem;     /* 40px */
  --font-size-5xl:        3.5rem;     /* 56px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;
  --font-weight-black:    900;

  --line-height-tight:    1.1;
  --line-height-base:     1.6;
  --line-height-relaxed:  1.7;

  /* ============================================================
   * Spacing scale
   * ============================================================ */
  --space-0:              0;
  --space-1:              0.25rem;    /* 4px */
  --space-2:              0.5rem;     /* 8px */
  --space-3:              0.75rem;    /* 12px */
  --space-4:              1rem;       /* 16px */
  --space-5:              1.5rem;     /* 24px */
  --space-6:              2rem;       /* 32px */
  --space-7:              3rem;       /* 48px */
  --space-8:              4rem;       /* 64px */
  --space-9:              5rem;       /* 80px */
  --space-10:             7.5rem;     /* 120px — section breathing */

  /* ============================================================
   * Radius + shadow
   * ============================================================ */
  --radius-sm:            0.375rem;
  --radius:               0.625rem;
  --radius-lg:            0.875rem;
  --radius-xl:            1.25rem;
  --radius-2xl:           1.5rem;
  --radius-pill:          999px;

  --shadow-sm:            0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow:               0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg:            0 20px 40px rgba(15, 23, 42, 0.08);
  --shadow-emerald:       0 10px 25px -5px rgba(16, 185, 129, 0.4);

  /* ============================================================
   * Transitions
   * ============================================================ */
  --transition-fast:      150ms ease;
  --transition:           300ms ease;
  --transition-slow:      400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
   * Layout container max widths
   * ============================================================ */
  --container-sm:         640px;
  --container-md:         768px;
  --container-lg:         1024px;
  --container-xl:         1200px;     /* Linear/Stripe-grade container */

  /* ============================================================
   * Section padding (per-module breathing room)
   * ============================================================ */
  --section-padding-y:     5rem;       /* 80px mobile */
  --section-min-mobile:    auto;
  --section-min-tablet:    auto;
  --section-min-desktop:   auto;

  /* ============================================================
   * Z-index scale
   * ============================================================ */
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-modal-backdrop:     900;
  --z-modal:              1000;
  --z-toast:              1100;
}

@media (min-width: 768px) {
  :root {
    --section-padding-y: 7.5rem;       /* 120px desktop */
  }
}