/* =============================================================
   DreamHack Nexus — Design Tokens
   ui-ux/styles/tokens.css
   Owner: ui-ux agent  |  Phase 2
   ============================================================= */

/* ---- Web Font Declarations ---- */
/* src paths are absolute project placeholders — swap /fonts/ → real CDN/static
   path at build time. Both fonts ship one weight only; no italic variants. */

@font-face {
  font-family: 'Cubic';
  src: url('/fonts/cubic.ttf') format('truetype');
  font-weight: 700;     /* treat as Bold display — only weight available */
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'AubetteArchiType';
  src: url('/fonts/AubetteArchiType-Regular.otf') format('opentype');
  font-weight: 400;     /* Regular — only weight available */
  font-style:  normal;
  font-display: swap;
}

:root {
  /* ---- Colour Palette ---- */
  --nexus-bg-deep:        #0a0b10;   /* Deepest background, full overlay backdrops */
  --nexus-bg-surface:     #12141e;   /* Card / panel surface */
  --nexus-bg-elevated:    #1c1f2e;   /* Elevated panels, modals */
  --nexus-border:         #2a2d40;   /* Default border */
  --nexus-border-active:  #4a4fff;   /* Active / focused border */

  --nexus-accent:         #4a4fff;   /* Primary accent — electric indigo */
  --nexus-accent-hover:   #6366ff;
  --nexus-accent-glow:    rgba(74, 79, 255, 0.35);

  --nexus-neon-green:     #39ff7e;   /* Success, online indicators */
  --nexus-neon-orange:    #ff6b2b;   /* Warning, performance mode active */
  --nexus-neon-red:       #ff3b5c;   /* Error, banned/disconnected states */
  --nexus-neon-yellow:    #ffe055;   /* Countdown, time-sensitive elements */

  --nexus-text-primary:   #e8eaf2;
  --nexus-text-secondary: #8b90b0;
  --nexus-text-muted:     #555870;
  --nexus-text-inverse:   #0a0b10;

  /* ---- Brand text colour (used by typography role classes) ---- */
  --brand-text-on-dark: #e8eaf2;   /* base colour; opacity applied per role */

  /* ---- Typography — Font Families ---- */
  /* Primary display font: Cubic (Bold display, one weight only) */
  --font-display:  'Cubic', system-ui, sans-serif;
  /* Secondary body font: AubetteArchiType (Regular 400, one weight only) */
  --font-body:     'AubetteArchiType', system-ui, sans-serif;
  /* Monospace — unchanged, used for keyboard labels / timers */
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* ---- Typography — Size Scale ---- */
  /* Canonical token names used by role utility classes below. */
  --font-size-display: 2.5rem;      /* 40px — billboard headlines, stage names */
  --font-size-xl:      1.5rem;      /* 24px — section headers, zone labels */
  --font-size-base:    0.9375rem;   /* 15px — body text, Social Card content */
  --font-size-sm:      0.8125rem;   /* 13px — UI labels, HUD stats */
  --font-size-xs:      0.6875rem;   /* 11px — captions, timestamps */

  /* Legacy size aliases kept for backward compatibility with existing components.
     New code should use --font-size-* tokens above. */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 0.9375rem;   /* 15px */
  --text-md:   1.0625rem;   /* 17px */
  --text-lg:   1.25rem;     /* 20px */
  --text-xl:   1.5rem;      /* 24px */
  --text-2xl:  1.875rem;    /* 30px */
  --text-3xl:  2.5rem;      /* 40px */

  /* ---- Typography — Letter-Spacing Scale ---- */
  --ls-display:        -0.02em;   /* Display / billboard — tight tracking */
  --ls-section-header: +0.10em;  /* Section header / zone label — wide tracking */
  --ls-body:            0em;     /* Body — default tracking */
  --ls-label:          +0.08em;  /* UI label / HUD stat — moderate tracking */
  --ls-caption:        +0.06em;  /* Caption / timestamp — subtle tracking */

  /* ---- Spacing ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Radii ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* ---- Shadows / Glows ---- */
  --shadow-panel:  0 4px 24px rgba(0,0,0,0.6);
  --shadow-modal:  0 8px 48px rgba(0,0,0,0.8);
  --glow-accent:   0 0 16px var(--nexus-accent-glow);
  --glow-green:    0 0 12px rgba(57, 255, 126, 0.4);
  --glow-orange:   0 0 12px rgba(255, 107, 43, 0.4);
  --glow-red:      0 0 16px rgba(255, 59, 92, 0.45);

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:  cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:   120ms;
  --dur-normal: 220ms;
  --dur-slow:   380ms;

  /* ---- Z-index layers ---- */
  --z-hud:         100;
  --z-overlay:     200;
  --z-modal:       300;
  --z-critical:    400;   /* Disconnected screen, Chill Zone grace */
}

/* =============================================================
   Typography Role Utility Classes
   Single-weight hierarchy — hierarchy expressed via size,
   letter-spacing, text-transform, and opacity. No font-weight
   variation. No italic.
   ============================================================= */

/* Display / billboard headline
   Font: Cubic (only weight: 700 display)
   Use: LED walls, stage name overlays, major event titles        */
.text-display {
  font-family:     var(--font-display);
  font-size:       var(--font-size-display);
  font-weight:     700;          /* sole available weight in Cubic */
  font-style:      normal;
  letter-spacing:  var(--ls-display);
  text-transform:  none;
  color:           var(--brand-text-on-dark);
  opacity:         1;
}

/* Section header / zone label
   Font: AubetteArchiType Regular (only weight: 400)
   Use: zone panel headings, section dividers, map zone labels    */
.text-section-header {
  font-family:     var(--font-body);
  font-size:       var(--font-size-xl);
  font-weight:     400;          /* sole available weight */
  font-style:      normal;
  letter-spacing:  var(--ls-section-header);
  text-transform:  uppercase;
  color:           var(--brand-text-on-dark);
  opacity:         1;
}

/* Body / Social Card text
   Font: AubetteArchiType Regular (only weight: 400)
   Use: paragraph content, Social Card bios, onboarding copy     */
.text-body {
  font-family:     var(--font-body);
  font-size:       var(--font-size-base);
  font-weight:     400;
  font-style:      normal;
  letter-spacing:  var(--ls-body);
  text-transform:  none;
  color:           var(--brand-text-on-dark);
  opacity:         1;
}

/* UI label / HUD stat
   Font: AubetteArchiType Regular (only weight: 400)
   Use: button labels, HUD counters, stat tile labels, toggles   */
.text-label {
  font-family:     var(--font-body);
  font-size:       var(--font-size-sm);
  font-weight:     400;
  font-style:      normal;
  letter-spacing:  var(--ls-label);
  text-transform:  uppercase;
  color:           var(--brand-text-on-dark);
  opacity:         0.70;
}

/* Caption / timestamp
   Font: AubetteArchiType Regular (only weight: 400)
   Use: last-updated stamps, fine-print notes, hint text          */
.text-caption {
  font-family:     var(--font-body);
  font-size:       var(--font-size-xs);
  font-weight:     400;
  font-style:      normal;
  letter-spacing:  var(--ls-caption);
  text-transform:  none;
  color:           var(--brand-text-on-dark);
  opacity:         0.50;
}