/* ============================================
   AWSP.APP — Hybrid Design Token System
   Safe to add to any Next.js project.
   These are CSS custom properties only —
   they define values but apply nothing until
   explicitly called in your components.
   ============================================ */

:root {

  /* ── Core Brand Colors ── */
  --awsp-navy:       #1A1A2E;   /* nav, page chrome, fantasy header   */
  --awsp-slate:      #2C3E50;   /* hero bg, chat header, secondary bg  */
  --awsp-teal:       #00B4A6;   /* logo accent, live scores, +stats    */
  --awsp-rose:       #E94560;   /* primary CTA, join banner, live dot  */
  --awsp-gold:       #F5A623;   /* top fantasy points, match winners   */
  --awsp-sunflower:  #FDCB6E;   /* stat numbers on dark, rank badges   */
  --awsp-violet:     #8E44AD;   /* premium tier, verified, GDPR gate   */

  /* ── Surface Colors ── */
  --awsp-bg:         #F8F9FA;   /* card surfaces, page fill, chat area */
  --awsp-white:      #FFFFFF;   /* card backgrounds, text on dark      */
  --awsp-border:     #E8E8E8;   /* card borders, dividers              */

  /* ── Text Colors ── */
  --awsp-text-primary:   #2C3E50;   /* headings, body on light surfaces */
  --awsp-text-secondary: #636E72;   /* meta, timestamps, sport labels   */
  --awsp-text-muted:     #95A5A6;   /* placeholders, disabled states    */
  --awsp-text-on-dark:   #FFFFFF;   /* any text on navy/slate/rose      */

  /* ── Semantic Color Aliases ── */
  /* Use these in components — swap the token
     value here if brand colors ever change    */
  --awsp-color-live:     var(--awsp-rose);
  --awsp-color-win:      var(--awsp-teal);
  --awsp-color-final:    var(--awsp-gold);
  --awsp-color-premium:  var(--awsp-violet);
  --awsp-color-cta:      var(--awsp-rose);
  --awsp-color-stat:     var(--awsp-sunflower);

  /* ── Transparent Tints ── */
  /* Used for badge backgrounds, pill fills   */
  --awsp-teal-10:    rgba(0, 180, 166, 0.10);
  --awsp-teal-18:    rgba(0, 180, 166, 0.18);
  --awsp-rose-10:    rgba(233, 69, 96, 0.10);
  --awsp-rose-18:    rgba(233, 69, 96, 0.18);
  --awsp-gold-12:    rgba(245, 166, 35, 0.12);
  --awsp-gold-20:    rgba(245, 166, 35, 0.20);
  --awsp-sun-20:     rgba(253, 203, 110, 0.20);
  --awsp-violet-10:  rgba(142, 68, 173, 0.10);
  --awsp-violet-18:  rgba(142, 68, 173, 0.18);
  --awsp-navy-06:    rgba(26, 26, 46, 0.06);

  /* ── Spacing Scale ── */
  --awsp-space-1:  4px;
  --awsp-space-2:  8px;
  --awsp-space-3:  12px;
  --awsp-space-4:  16px;
  --awsp-space-5:  20px;
  --awsp-space-6:  24px;
  --awsp-space-8:  32px;
  --awsp-space-10: 40px;

  /* ── Border Radius ── */
  --awsp-radius-sm:   6px;
  --awsp-radius-md:   8px;
  --awsp-radius-lg:   12px;
  --awsp-radius-xl:   16px;
  --awsp-radius-pill: 9999px;

  /* ── Typography ── */
  --awsp-font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --awsp-font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  --awsp-text-xs:   11px;
  --awsp-text-sm:   13px;
  --awsp-text-base: 15px;
  --awsp-text-lg:   18px;
  --awsp-text-xl:   22px;
  --awsp-text-2xl:  28px;
  --awsp-text-3xl:  36px;

  /* ── Shadows (subtle, flat-first) ── */
  --awsp-shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --awsp-shadow-nav:  0 1px 0 rgba(255,255,255,0.06);

  /* ── Transitions ── */
  --awsp-transition: 150ms ease;
  --awsp-transition-slow: 300ms ease;

  /* ── Nav ── */
  --awsp-nav-height:        56px;
  --awsp-nav-height-mobile: 48px;

  /* ── Z-index Scale ── */
  --awsp-z-base:    1;
  --awsp-z-card:    10;
  --awsp-z-nav:     100;
  --awsp-z-modal:   1000;
  --awsp-z-toast:   2000;
}