/* ============================================================================
   Design Tokens — SC2 Coaching Platform
   ============================================================================
   The foundation layer. Every component CSS file in modules/core/components/
   MUST consume these tokens — no hardcoded hex values outside this file.

   Tokens harmonize with the existing dark sci-fi palette already used in
   style.css (--bg, --surface, --accent, race colors, etc.). Where existing
   tokens already cover a concept, we re-export under the new naming
   convention so component CSS can reference either.

   Conventions:
   - Two-tier naming: semantic (e.g. --color-bg) wraps primitive (#0a0d14).
     Components reference the semantic name. Theme overrides flip primitives.
   - Spacing scale is 4px-based.
   - Type scale is rem-based and mirrors common Tailwind sizing.
   - Z-index uses centralized layers to prevent stacking-context wars.
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     Colors — Surfaces
     ----------------------------------------------------------------------- */
  --color-bg:           #0a0d14;
  --color-bg-raised:    #0f131c;
  --color-bg-elevated:  #141821;
  --color-bg-overlay:   #1c212c;
  --color-bg-overlay-2: #242b38;

  /* -----------------------------------------------------------------------
     Colors — Borders
     ----------------------------------------------------------------------- */
  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-border-focus:  #56c2ff;

  /* -----------------------------------------------------------------------
     Colors — Text
     ----------------------------------------------------------------------- */
  --color-text:        #e6e9ef;
  --color-text-muted:  #aab3c2;
  --color-text-subtle: #6e7687;
  --color-text-on-accent: #0a0d14;
  --color-text-inverse:   #0a0d14;

  /* -----------------------------------------------------------------------
     Colors — Brand / Accent
     The existing app uses a cyan accent (#56c2ff) — we keep it to
     harmonize with the established sci-fi vibe. Orange CTA is reserved
     for high-conversion moments (Buy / Book / Subscribe) added later.
     ----------------------------------------------------------------------- */
  --color-accent:         #56c2ff;
  --color-accent-hover:   #7ed0ff;
  --color-accent-pressed: #3aa8e8;
  --color-accent-soft:    rgba(86, 194, 255, 0.14);
  --color-link:           #7ed0ff;
  --color-link-hover:     #a3deff;

  /* Secondary accent — purple — currently used for "premium" / Pro */
  --color-brand-2:        #a78bfa;
  --color-brand-2-hover:  #c4afff;
  --color-brand-2-soft:   rgba(167, 139, 250, 0.14);

  /* High-conversion CTA — orange (per master plan) */
  --color-cta:         #ff7a00;
  --color-cta-hover:   #ff8c1f;
  --color-cta-pressed: #e66d00;
  --color-cta-soft:    rgba(255, 122, 0, 0.14);

  /* -----------------------------------------------------------------------
     Colors — Status
     ----------------------------------------------------------------------- */
  --color-success:        #4ade80;
  --color-success-hover:  #6ee7a0;
  --color-success-soft:   rgba(74, 222, 128, 0.14);

  --color-warning:        #fbbf24;
  --color-warning-hover:  #fcd060;
  --color-warning-soft:   rgba(251, 191, 36, 0.14);

  --color-danger:         #f87171;
  --color-danger-hover:   #fa9090;
  --color-danger-pressed: #ef4444;
  --color-danger-soft:    rgba(248, 113, 113, 0.14);

  --color-info:           #56c2ff;
  --color-info-soft:      rgba(86, 194, 255, 0.14);

  /* -----------------------------------------------------------------------
     Colors — SC2 Race Identity
     ----------------------------------------------------------------------- */
  --color-race-zerg:    #a78bfa;  /* purple */
  --color-race-protoss: #f7c948;  /* gold */
  --color-race-terran:  #56c2ff;  /* cyan */
  --color-race-random:  #c0caf0;

  /* -----------------------------------------------------------------------
     Colors — Player slots (replay viewer parity)
     ----------------------------------------------------------------------- */
  --color-player-1: #ef5a6f;
  --color-player-2: #4b9eff;

  /* -----------------------------------------------------------------------
     Colors — Presence dots
     ----------------------------------------------------------------------- */
  --color-presence-online:  #4ade80;
  --color-presence-idle:    #fbbf24;
  --color-presence-busy:    #f87171;
  --color-presence-offline: #6e7687;

  /* -----------------------------------------------------------------------
     Colors — Star ratings
     ----------------------------------------------------------------------- */
  --color-star-on:  #f7c948;
  --color-star-off: rgba(255, 255, 255, 0.18);

  /* -----------------------------------------------------------------------
     Colors — League badges (existing palette)
     ----------------------------------------------------------------------- */
  --color-league-gm:       #ffd562;
  --color-league-master:   #c0caf0;
  --color-league-diamond:  #56c2ff;
  --color-league-platinum: #4ade80;

  /* -----------------------------------------------------------------------
     Typography — Font families
     ----------------------------------------------------------------------- */
  --font-display: 'Rajdhani', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui:      'Inter', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  /* Used as a single body default; explicitly named --font-body for clarity */
  --font-body:    var(--font-ui);

  /* -----------------------------------------------------------------------
     Typography — Type scale (rem-based, 1rem = 16px default)
     ----------------------------------------------------------------------- */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-5xl:   3rem;      /* 48px */

  /* -----------------------------------------------------------------------
     Typography — Line heights
     ----------------------------------------------------------------------- */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* -----------------------------------------------------------------------
     Typography — Weights
     ----------------------------------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* -----------------------------------------------------------------------
     Typography — Letter spacing
     ----------------------------------------------------------------------- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-wider:  0.05em;
  --tracking-display:0.04em;

  /* -----------------------------------------------------------------------
     Spacing scale (4px base)
     ----------------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* -----------------------------------------------------------------------
     Border radius
     ----------------------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* -----------------------------------------------------------------------
     Shadows
     ----------------------------------------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-sm:   0 2px 4px rgba(0, 0, 0, 0.22);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.28);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl:   0 24px 48px -12px rgba(0, 0, 0, 0.6);
  --shadow-glow-accent: 0 0 0 3px rgba(86, 194, 255, 0.25);
  --shadow-glow-danger: 0 0 0 3px rgba(248, 113, 113, 0.25);

  /* -----------------------------------------------------------------------
     Motion
     ----------------------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 0ms;
  --duration-fast:    140ms;
  --duration-medium:  220ms;
  --duration-slow:    360ms;
  --duration-deliberate: 520ms;

  /* -----------------------------------------------------------------------
     Z-index layers
     Components: dropdown < modal < toast < tooltip
     ----------------------------------------------------------------------- */
  --z-base:      1;
  --z-raised:    10;
  --z-sticky:    100;
  --z-dropdown:  1000;
  --z-drawer:    1500;
  --z-modal:     2000;
  --z-popover:   2500;
  --z-toast:     3000;
  --z-tooltip:   4000;
  --z-overlay-max: 9999;

  /* -----------------------------------------------------------------------
     Sizing — Touch targets
     ----------------------------------------------------------------------- */
  --tap-target-min: 44px;

  /* -----------------------------------------------------------------------
     Sizing — Container widths
     ----------------------------------------------------------------------- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* -----------------------------------------------------------------------
     Component sizes (intentionally small — components fall back to these
     when no override is provided)
     ----------------------------------------------------------------------- */
  --avatar-xs: 20px;
  --avatar-sm: 28px;
  --avatar-md: 40px;
  --avatar-lg: 56px;
  --avatar-xl: 80px;

  /* -----------------------------------------------------------------------
     Bridge to existing style.css tokens.
     The existing app uses --bg, --surface, --accent, etc. We don't redefine
     them (they're already in style.css :root) — but we do guarantee these
     fall back if the file is loaded standalone (e.g. in tests).
     ----------------------------------------------------------------------- */
  --bg:           var(--color-bg);
  --bg-elev:      var(--color-bg-raised);
  --surface:      var(--color-bg-elevated);
  --surface-alt:  var(--color-bg-overlay);
  --surface-hi:   var(--color-bg-overlay-2);
  --accent:       var(--color-accent);
  --accent-dim:   var(--color-accent-soft);
  --text:         var(--color-text);
  --text-dim:     var(--color-text-muted);
  --text-muted:   var(--color-text-subtle);
}

/* ============================================================================
   Light theme override (opt-in via [data-theme="light"] on <html>)
   Currently a starting palette — refine when designers ship light-mode comps.
   ========================================================================= */
[data-theme="light"] {
  --color-bg:           #f7f8fa;
  --color-bg-raised:    #ffffff;
  --color-bg-elevated:  #ffffff;
  --color-bg-overlay:   #f0f2f5;
  --color-bg-overlay-2: #e6e9ef;

  --color-border:        rgba(15, 19, 28, 0.08);
  --color-border-strong: rgba(15, 19, 28, 0.16);
  --color-border-focus:  #2196d6;

  --color-text:        #15192a;
  --color-text-muted:  #4a5266;
  --color-text-subtle: #6e7687;
  --color-text-on-accent: #ffffff;
  --color-text-inverse:   #ffffff;

  --color-accent:         #2196d6;
  --color-accent-hover:   #1a82bd;
  --color-accent-pressed: #167bb5;
  --color-accent-soft:    rgba(33, 150, 214, 0.10);
  --color-link:           #167bb5;
  --color-link-hover:     #126596;

  --color-success:        #16a34a;
  --color-success-hover:  #128c3f;
  --color-success-soft:   rgba(22, 163, 74, 0.10);

  --color-warning:        #d97706;
  --color-warning-hover:  #b96706;
  --color-warning-soft:   rgba(217, 119, 6, 0.10);

  --color-danger:         #dc2626;
  --color-danger-hover:   #c01f1f;
  --color-danger-soft:    rgba(220, 38, 38, 0.10);

  --color-info:           #2196d6;
  --color-info-soft:      rgba(33, 150, 214, 0.10);

  --color-star-off: rgba(15, 19, 28, 0.18);

  --shadow-xs:   0 1px 2px rgba(15, 19, 28, 0.06);
  --shadow-sm:   0 2px 4px rgba(15, 19, 28, 0.08);
  --shadow-md:   0 4px 12px rgba(15, 19, 28, 0.10);
  --shadow-lg:   0 12px 32px rgba(15, 19, 28, 0.16);
  --shadow-xl:   0 24px 48px -12px rgba(15, 19, 28, 0.20);
}

/* ============================================================================
   prefers-reduced-motion — components opt in to this via the duration tokens.
   When users prefer reduced motion, we collapse durations to 0.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0ms;
    --duration-medium:  0ms;
    --duration-slow:    0ms;
    --duration-deliberate: 0ms;
  }
}