/* ============================================================
   variables.css | TRT Esports Design Tokens
   ============================================================ */

:root {
  /* === COLOR PALETTE === */
  --clr-primary:        #7df9ff;
  --clr-bg-dark:        #000000;
  --clr-surface-1:      #040404;
  --clr-surface-2:      #080808;
  --clr-surface-3:      #0d0d0d;            /* layering depth */
  --clr-text-main:      #f5f5f5;
  --clr-text-muted:     #a8a8a8;
  --clr-text-dim:       #3d3d3d;            /* near-invisible utility */
  --clr-text-bright:    #ffffff;            /* pure white pop */

  /* RGB channels for alpha compositing */
  --rgb-primary:   125, 249, 255;
  --rgb-black:       0,   0,   0;
  --rgb-white:     255, 255, 255;
  --rgb-gold:      255, 215,   0;
  --rgb-red:       255,  60,  60;

  /* Semantic / abstracted colors */
  --clr-glow-primary:       rgba(var(--rgb-primary), 0.32);
  --clr-glow-strong:        rgba(var(--rgb-primary), 0.55);
  --clr-glow-ambient:       rgba(var(--rgb-primary), 0.07);   /* far-field wash */
  --clr-glow-tight:         rgba(var(--rgb-primary), 0.72);   /* focused highlight */
  --clr-border-hud:         rgba(var(--rgb-primary), 0.15);
  --clr-border-hud-bright:  rgba(var(--rgb-primary), 0.42);   /* active / selected */
  --clr-border-subtle:      rgba(var(--rgb-white),   0.05);

  /* Gradient tokens */
  --gradient-text:         linear-gradient(90deg,  #ffffff 0%,   var(--clr-primary) 55%, rgba(var(--rgb-primary), 0)    100%);
  --gradient-text-lg:      linear-gradient(110deg, #ffffff 15%,  var(--clr-primary) 58%, rgba(var(--rgb-primary), 0.32) 100%);
  --gradient-primary:      linear-gradient(135deg, var(--clr-primary), rgba(var(--rgb-primary), 0.48));
  --gradient-surface:      linear-gradient(180deg, var(--clr-surface-2) 0%, var(--clr-bg-dark) 100%);
  --gradient-glow-radial:  radial-gradient(ellipse 70% 35% at 50% 0%, rgba(var(--rgb-primary), 0.1) 0%, transparent 70%);
  --gradient-scan:         repeating-linear-gradient(
                             0deg,
                             transparent 0px, transparent 3px,
                             rgba(var(--rgb-black), 0.06) 3px, rgba(var(--rgb-black), 0.06) 4px
                           );

  /* Glass / frosted surface tokens */
  --glass-bg:       rgba(var(--rgb-primary), 0.025);
  --glass-border:   rgba(var(--rgb-primary), 0.1);
  --glass-backdrop: blur(20px) saturate(1.4);

  /* === TYPOGRAPHY === */
  --font-head:    'Rajdhani', sans-serif;
  --font-display: 'Orbitron', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-ui:      'DM Mono', monospace;

  /* Font feature settings */
  --ffs-head:    "kern" 1, "liga" 1;
  --ffs-display: "kern" 1, "ss01" 1;
  --ffs-mono:    "zero" 1, "ss01" 1;         /* slashed zeros, alt digit glyphs */
  --ffs-num:     "tnum" 1, "lnum" 1;         /* tabular lining numerals */

  /* === LAYOUT & SPACING === */
  --nav-height:    clamp(58px, 8vh, 80px);
  --telem-height:  clamp(24px, 3.5vh, 28px);
  --tab-strip-h:   38px;

  --container-max: 1600px;
  --container-md:  1400px;

  --space-xs:  clamp(0.5rem,  1vw,   0.8rem);
  --space-sm:  clamp(1rem,    2vw,   1.5rem);
  --space-md:  clamp(1.5rem,  3vw,   2.5rem);
  --space-lg:  clamp(2rem,    4vw,   4rem);
  --space-xl:  clamp(4rem,    8vw,   8rem);
  --gutter:    clamp(1.5rem,  5vw,   4rem);

  /* === RADII === */
  --radius-sm: 2px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* === CLIP PATHS === */
  --clip-angle-sm:  polygon(6px 0,  100% 0, calc(100% -  6px) 100%, 0 100%);
  --clip-angle-md:  polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  --clip-angle-lg:  polygon(24px 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
  --clip-corner-tl: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
  --clip-corner-tr: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  --clip-hud-card:  polygon(
                      12px 0, 100% 0,
                      100% calc(100% - 12px),
                      calc(100% - 12px) 100%,
                      0 100%, 0 12px
                    );

  /* === TRANSITIONS & EASINGS === */
  --ease-snap:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth:    cubic-bezier(0.25, 1, 0.20, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.30, 1);     /* dramatic deceleration */
  --ease-in-back:   cubic-bezier(0.36, 0, 0.66, -0.56); /* anticipation pull-back */
  --trans-fast:     0.2s ease;
  --trans-med:      0.4s ease;
  --trans-snap:     0.4s var(--ease-snap);
  --trans-expo:     0.5s var(--ease-out-expo);

  /* === SHADOWS / DEPTH === */
  --shadow-card:    0 4px 48px rgba(var(--rgb-black), 0.92),
                    0 1px 0 rgba(var(--rgb-white), 0.03),
                    inset 0 1px 0 rgba(var(--rgb-white), 0.04);
  --shadow-glow-sm: 0 0 16px rgba(var(--rgb-primary), 0.25),
                    0 0  5px rgba(var(--rgb-primary), 0.55);
  --shadow-glow-md: 0 0 36px rgba(var(--rgb-primary), 0.3),
                    0 0  10px rgba(var(--rgb-primary), 0.6);
  --shadow-glow-lg: 0 0 80px rgba(var(--rgb-primary), 0.18),
                    0 0  28px rgba(var(--rgb-primary), 0.42);
  --shadow-lift:    inset 0 1px 0 rgba(var(--rgb-primary), 0.5);
  --shadow-card-hover: 0 8px 60px rgba(var(--rgb-black), 0.95),
                       0 0 40px rgba(var(--rgb-primary), 0.08),
                       inset 0 1px 0 rgba(var(--rgb-white), 0.06);

  /* === Z-INDEX === */
  --z-bg:     0;
  --z-base:   1;
  --z-above:  10;
  --z-nav:    100;
  --z-modal:  999;
  --z-loader: 9999;
}