/* ==========================================================================
   TeeBa Games — Official Brand System (v1.0 2026 Brandbook)
   Solid Color · No Gradients · No Glows · No Glassmorphism
   Void Black, Signal White, Portal Green, Laser Lime
   ========================================================================== */

:root {
  /* --- Brandbook Core Palette (Page 03: 70 / 20 / 10 Ratio) --- */
  --color-void:        #090B0A; /* Primary solid field · depth (70%) */
  --color-portal:      #00E84D; /* Action · light · focus (10%) */
  --color-signal:      #F5F7F2; /* Type · clarity · space (20%) */
  --color-charcoal:    #1A1E1B; /* Secondary surface · structure */
  --color-graphite:    #292E2A; /* Tertiary surface · borders */
  --color-soft-paper:  #E8ECE5; /* Light contrast elements */
  --color-laser-lime:  #A8FF35; /* High-contrast action pills & CTAs */
  --color-alert-ember: #FF5C35; /* Alert & warning signals */

  /* --- Mapped Solid Surface Tokens --- */
  --bg-deep:       var(--color-void);
  --bg-surface:    var(--color-charcoal);
  --bg-card:       var(--color-charcoal);
  --bg-card-hover: var(--color-graphite);
  --bg-elevated:   var(--color-graphite);

  /* --- Solid Crisp Borders (No blurry lines) --- */
  --border-subtle:    #1F2420;
  --border-medium:    #2C332D;
  --border-strong:    #3E4840;
  --border-highlight: var(--color-portal);
  --border-green:     var(--color-portal);
  --border-lime:      var(--color-laser-lime);

  /* --- Solid Typography --- */
  --text-primary:   var(--color-signal);
  --text-secondary: #A6ACA3;
  --text-tertiary:  #687067;
  --text-muted:     #424841;

  /* --- Accents --- */
  --accent:       var(--color-portal);
  --accent-lime:  var(--color-laser-lime);
  --accent-ember: var(--color-alert-ember);
  --accent-live:  var(--color-portal);

  /* --- Typography (Brandbook Page 04) --- */
  --font-display: 'Roboto Condensed', 'Inter', system-ui, sans-serif;
  --font-ui:      'Roboto Condensed', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Roboto Mono', monospace;

  /* --- Motion --- */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Standardized Radius System (Brandbook 2026) --- */
  --radius-xs:    6px;     /* Icons & micro elements */
  --radius-sm:    10px;    /* Inputs, dropdown items & control buttons */
  --radius-md:    16px;    /* Terminal, avatar media & sub-panels */
  --radius-lg:    24px;    /* Standard cards, slates, bento panels & metrics ribbon */
  --radius-xl:    32px;    /* Featured hero cards, arbiter & finale cards */
  --radius-pill:  9999px;  /* Buttons, pills, status badges & UI signal chips */
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--color-void);
  color: var(--color-signal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  line-height: 1.65;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background-color: var(--color-void);
  color: var(--color-signal);
  position: relative;
}

main {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* Remove decorative noise / gradients */
.studio-mesh {
  display: none !important;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}

.container-narrow {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}