/* ============================================================
   Champions Battle — DESIGN SYSTEM TOKENS
   Liquid Glass · dark-first. Indigo → Cyan Brand.
   Adapted from Tayyor AI Design System.
   ============================================================ */
:root {
  /* —— Brand Primary & Accents —— */
  --indigo-500: #4F46E5;      /* Primary brand */
  --indigo-600: #4338CA;      /* Primary hover/active */
  --indigo-400: #6366F1;      /* Light primary */
  --indigo-300: #818CF8;
  --cyan-500:   #06B6D4;      /* Secondary accent */
  --cyan-400:   #22D3EE;      /* Vivid cyan */
  --cyan-300:   #67E8F9;      /* Icy highlight / overlines */

  --primary:        #4F46E5;
  --primary-hover:  #4338CA;
  --primary-light:  #6366F1;
  --accent:         #06B6D4;
  --accent-light:   #22D3EE;
  --highlight:      #67E8F9;

  /* —— Brand Gradients —— */
  --grad-brand: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(79,70,229,.85) 0%, rgba(6,182,212,.85) 100%);
  --grad-sheen: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 55%);
  --grad-card: linear-gradient(145deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 100%);
  --grad-pitch: linear-gradient(180deg, #102A1E 0%, #0B1C14 100%);

  /* Tint Gradients for Icon Boxes & Badges */
  --tint-indigo: linear-gradient(140deg, #4F46E5 0%, #6366F1 100%);
  --tint-cyan:   linear-gradient(140deg, #06B6D4 0%, #22D3EE 100%);
  --tint-violet: linear-gradient(140deg, #6D5DF0 0%, #8B5CF6 100%);
  --tint-teal:   linear-gradient(140deg, #4F46E5 0%, #06B6D4 100%);
  --tint-amber:  linear-gradient(140deg, #D97706 0%, #F59E0B 100%);
  --tint-emerald:linear-gradient(140deg, #16A34A 0%, #22C55E 100%);
  --tint-rose:   linear-gradient(140deg, #DC2626 0%, #EF4444 100%);
  --tint-slate:  linear-gradient(140deg, #2A3045 0%, #1A1F2E 100%);

  /* —— Semantic Status —— */
  --success-500: #16A34A;
  --success-400: #22C55E;
  --danger-500:  #DC2626;
  --danger-400:  #EF4444;
  --warning-500: #D97706;
  --warning-400: #F59E0B;

  --success: #22C55E;
  --danger:  #EF4444;
  --warning: #F59E0B;
  --info:    #06B6D4;

  --success-fill: rgba(22,163,74,.18);
  --success-text: #5BE08A;
  --danger-fill:  rgba(220,38,38,.18);
  --danger-text:  #FF8585;
  --warning-fill: rgba(217,119,6,.18);
  --warning-text: #F6BD60;
  --info-fill:    rgba(6,182,212,.18);
  --info-text:    #5FE3F5;

  /* —— Neutral Palette (Cool, blue-tinted dark) —— */
  --ink-900: #0B0B12;   /* Deep canvas background */
  --ink-850: #101019;   /* Elevated layer */
  --ink-800: #14141F;   /* Neutral surface */
  --ink-700: #1B1B28;   /* Card surface */
  --ink-600: #262636;   /* Border / highlight */
  --slate-400: #A5B4CC; /* Secondary text */
  --slate-300: #C7D0E0; /* Subtitle text */
  --paper-50:  #F1F5F9; /* Primary text */
  --white:     #FFFFFF;

  --bg:          #0B0B12;
  --bg-app:      #0B0B12;
  --bg-elevated: #101019;
  --bg-canvas:   #14141F;
  --bg-scrim:    rgba(6,7,14,.75);
  --surface:     #101019;
  --surface2:    #14141F;
  --surface3:    #1B1B28;

  /* Radial Brand Glow at top of app */
  --glow-brand: radial-gradient(120% 120% at 50% -10%,
                 rgba(79,70,229,.42) 0%, rgba(6,182,212,.18) 38%, rgba(11,11,18,0) 75%);

  /* —— Text Tokens —— */
  --text:           #F1F5F9;
  --text-primary:   #F1F5F9;
  --text-secondary: #A5B4CC;
  --muted:          #A5B4CC;
  --text-tertiary:  #6B7796;
  --text-disabled:  #5A6175;
  --text-on-brand:  #FFFFFF;

  /* —— Liquid Glass Properties —— */
  --glass-fill:        rgba(255,255,255,.07);
  --glass-fill-strong: rgba(255,255,255,.12);
  --glass-fill-hover:  rgba(255,255,255,.11);
  --glass-rim:         rgba(255,255,255,.22);
  --glass-rim-bright:  rgba(255,255,255,.45);
  --glass-inner-glow:  rgba(120,160,255,.10);
  --glass-blur:        18px;
  --glass-blur-filter: blur(18px) saturate(140%);

  /* Lines & Dividers */
  --border:         rgba(255,255,255,.12);
  --border-subtle:  rgba(255,255,255,.08);
  --border-strong:  rgba(255,255,255,.20);

  /* Shadows */
  --shadow-sm:    0 2px 8px rgba(0,0,0,.35);
  --shadow-card:  0 8px 24px rgba(0,0,0,.45);
  --shadow-pop:   0 16px 48px rgba(0,0,0,.60);
  --shadow-btn:   0 8px 28px rgba(79,70,229,.40);
  --shadow-sheet: 0 -12px 48px rgba(0,0,0,.65);

  /* Rim Light Tokens */
  --rim-top: inset 0 1px 0 rgba(255,255,255,.28);
  --glass-shadow: 0 8px 24px rgba(0,0,0,.45),
                  inset 0 1px 0 rgba(255,255,255,.26),
                  inset 0 0 24px rgba(120,160,255,.06);
  --glass-shadow-sm: 0 4px 14px rgba(0,0,0,.35),
                     inset 0 1px 0 rgba(255,255,255,.20);

  /* Fields / Inputs */
  --field-fill:    rgba(20,21,32,.92);
  --field-border:  rgba(255,255,255,.16);
  --field-focus:   #6366F1;

  /* Typography */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing (8pt grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --gutter:  16px;

  /* Border Radii */
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     20px;
  --radius-2xl:    24px;
  --radius-card:   20px;
  --radius-button: 14px;
  --radius-pill:   999px;

  /* Control Heights */
  --height-sm: 36px;
  --height-md: 48px;
  --height-lg: 54px;

  /* Transitions */
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --duration:    200ms;

  /* Z-Index */
  --z-base:   1;
  --z-nav:    100;
  --z-modal:  200;
  --z-toast:  300;
  --z-splash: 400;
}

[data-theme="light"] {
  --bg-app:        #EEF2FB;
  --bg:            #EEF2FB;
  --bg-canvas:     #E4E9F4;
  --bg-elevated:   #FFFFFF;
  --surface:       #FFFFFF;
  --surface2:      #F1F5F9;
  --surface3:      #E2E8F0;
  --bg-scrim:      rgba(15,23,42,.34);

  --glow-brand: radial-gradient(120% 120% at 50% -10%,
                 rgba(79,70,229,.20) 0%, rgba(6,182,212,.10) 40%, rgba(238,242,251,0) 72%);

  --text:           #0F172A;
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --muted:          #475569;
  --text-tertiary:  #94A3B8;
  --text-disabled:  #B6BECC;

  --glass-fill:        rgba(255,255,255,.75);
  --glass-fill-strong: rgba(255,255,255,.90);
  --glass-fill-hover:  rgba(255,255,255,.85);
  --glass-rim:         rgba(255,255,255,.95);
  --glass-rim-bright:  rgba(255,255,255,1);
  --glass-inner-glow:  rgba(79,70,229,.06);

  --field-fill:    rgba(255,255,255,.96);
  --field-border:  rgba(15,23,42,.14);

  --border:        rgba(15,23,42,.10);
  --border-subtle: rgba(15,23,42,.08);
  --border-strong: rgba(15,23,42,.16);

  --success-text: #15803D;
  --danger-text:  #B91C1C;
  --warning-text: #B45309;
  --info-text:    #0E7490;
}