/* ============================================================
   SPORTSPLAY — DESIGN TOKENS
   Central source of truth for all visual values
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-primary:        #22C55E;
  --color-primary-hover:  #16A34A;
  --color-primary-muted:  rgba(34, 197, 94, 0.12);
  --color-primary-dim:    rgba(34, 197, 94, 0.06);

  --color-accent:         #F59E0B;
  --color-accent-hover:   #D97706;

  --color-danger:         #EF4444;
  --color-danger-muted:   rgba(239, 68, 68, 0.12);

  --color-warning:        #F97316;
  --color-success:        #22C55E;
  --color-info:           #3B82F6;

  /* ── Semantic: Light Mode (default) ── */
  --bg-app:               #F7F8FA;
  --bg-card:              #FFFFFF;
  --bg-card-hover:        #F0F2F5;
  --bg-input:             #FFFFFF;
  --bg-input-focus:       #FFFFFF;
  --bg-overlay:           rgba(0, 0, 0, 0.48);
  --bg-skeleton:          #E5E7EB;
  --bg-chip:              #E5E7EB;
  --bg-chip-active:       var(--color-primary-muted);

  --text-primary:         #0F172A;
  --text-secondary:       #475569;
  --text-tertiary:        #94A3B8;
  --text-inverse:         #FFFFFF;
  --text-on-primary:      #FFFFFF;
  --text-link:            var(--color-primary);

  --border-default:       #E2E8F0;
  --border-subtle:        #F1F5F9;
  --border-input:         #CBD5E1;
  --border-input-focus:   var(--color-primary);
  --border-input-error:   var(--color-danger);

  --shadow-card:          0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card-hover:    0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-modal:         0 20px 60px rgba(0,0,0,0.20);
  --shadow-btn:           0 1px 2px rgba(0,0,0,0.10);

  /* ── Typography ── */
  --font-display:         'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body:            'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:            'JetBrains Mono', 'Courier New', monospace;

  --text-xs:              0.75rem;    /* 12px */
  --text-sm:              0.875rem;   /* 14px */
  --text-base:            1rem;       /* 16px */
  --text-md:              1.125rem;   /* 18px */
  --text-lg:              1.25rem;    /* 20px */
  --text-xl:              1.5rem;     /* 24px */
  --text-2xl:             1.875rem;   /* 30px */
  --text-3xl:             2.25rem;    /* 36px */
  --text-4xl:             3rem;       /* 48px */

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

  --leading-tight:        1.2;
  --leading-snug:         1.375;
  --leading-normal:       1.5;
  --leading-relaxed:      1.625;

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

  /* ── Radii ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --transition-fast:   120ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;

  /* ── Z-index layers ── */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

  /* ── Layout ── */
  --max-width:        430px;
  --header-height:    56px;
  --nav-height:       64px;
  --safe-bottom:      env(safe-area-inset-bottom, 16px);
}

/* ── Dark Mode ── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-app:               #0F172A;
    --bg-card:              #1E293B;
    --bg-card-hover:        #253347;
    --bg-input:             #1E293B;
    --bg-input-focus:       #253347;
    --bg-skeleton:          #253347;
    --bg-chip:              #253347;
    --bg-chip-active:       var(--color-primary-muted);

    --text-primary:         #F1F5F9;
    --text-secondary:       #94A3B8;
    --text-tertiary:        #475569;

    --border-default:       #334155;
    --border-subtle:        #1E293B;
    --border-input:         #334155;

    --shadow-card:          0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-card-hover:    0 4px 12px rgba(0,0,0,0.50);
    --shadow-modal:         0 20px 60px rgba(0,0,0,0.60);
  }
}

/* Manual dark mode override via JS class */
.dark {
  --bg-app:               #0F172A;
  --bg-card:              #1E293B;
  --bg-card-hover:        #253347;
  --bg-input:             #1E293B;
  --bg-input-focus:       #253347;
  --bg-skeleton:          #253347;
  --bg-chip:              #253347;
  --bg-chip-active:       var(--color-primary-muted);

  --text-primary:         #F1F5F9;
  --text-secondary:       #94A3B8;
  --text-tertiary:        #475569;

  --border-default:       #334155;
  --border-subtle:        #1E293B;
  --border-input:         #334155;

  --shadow-card:          0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-card-hover:    0 4px 12px rgba(0,0,0,0.50);
  --shadow-modal:         0 20px 60px rgba(0,0,0,0.60);
}

/* ── Status colors ── */
:root {
  --status-pending:    #F59E0B;
  --status-confirmed:  #22C55E;
  --status-cancelled:  #EF4444;
  --status-declined:   #94A3B8;
}

/* ── Ad components ── */
:root {
  --ad-bg:         var(--bg-card);
  --ad-border:     var(--border-default);
  --ad-label:      var(--text-tertiary);
}