/* ═══════════════════════════════════════════════════════════════════
   TOKENS · Escape Room — O Dashboard Mentiu
   DS base: design/powerbiexperience/design-system.html (cyberpunk neon editorial)
   Skin escape room aplicada em escape-room.css
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  /* — Backgrounds dark (radial stack) — */
  --bg-dark-1: #14082E;
  --bg-dark-2: #0A0820;
  --bg-dark-3: #050510;
  --bg-glass:  rgba(20, 8, 46, 0.65);

  /* — Primárias Xperiun (paleta cyberpunk neon) — */
  --purple:        #9600ff;
  --blue:          #0000ff;
  --purple-bright: #C880FF;

  /* — Secundárias neon — */
  --cyan:       #00ffff;
  --cyan-light: #00c8ff;

  /* — Magenta (sinal de problema/fraude) — */
  --magenta:    #FF1493;
  --pink-light: #FF6BB6;

  /* — Texto — */
  --cream:      #F5F0E8;
  --cream-soft: #E8E2D6;
  --gray-dark:  #5A5560;
  --gray-light: #999999;
  --white:      #FFFFFF;

  /* — Estados de alerta — */
  --danger:  #FF1493;
  --warning: #FFB800;
  --success: #00FFA3;

  /* — Alphas canônicas — */
  --cyan-04:  rgba(0,255,255,0.04);
  --cyan-08:  rgba(0,255,255,0.08);
  --cyan-15:  rgba(0,255,255,0.15);
  --cyan-25:  rgba(0,255,255,0.25);
  --cyan-40:  rgba(0,255,255,0.40);
  --cyan-60:  rgba(0,255,255,0.60);

  --magenta-08: rgba(255,20,147,0.08);
  --magenta-15: rgba(255,20,147,0.15);
  --magenta-30: rgba(255,20,147,0.30);
  --magenta-50: rgba(255,20,147,0.50);
  --magenta-70: rgba(255,20,147,0.70);

  --purple-08: rgba(150,0,255,0.08);
  --purple-15: rgba(150,0,255,0.15);
  --purple-30: rgba(150,0,255,0.30);

  /* — Gradientes oficiais — */
  --gradient-bg:        radial-gradient(ellipse at 50% 50%, #14082E 0%, #0A0820 50%, #050510 100%);
  --gradient-brand:     linear-gradient(135deg, #00ffff 0%, #00c8ff 50%, #FF1493 100%);
  --gradient-divider:   linear-gradient(90deg, transparent, #00ffff, transparent);
  --gradient-divider-m: linear-gradient(90deg, transparent, #FF1493, transparent);

  /* — Tipografia — */
  --font-sans:    'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:   'Cormorant', Georgia, serif;
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* — Type scale (clamp fluida) — */
  --size-hero:     clamp(3rem, 7vw, 6rem);
  --size-title:    clamp(2rem, 4.5vw, 4rem);
  --size-section:  clamp(1.5rem, 3vw, 2.5rem);
  --size-large:    clamp(1.2rem, 2vw, 1.6rem);
  --size-base:     clamp(0.95rem, 1.4vw, 1.1rem);
  --size-small:    clamp(0.8rem, 1.1vw, 0.9rem);
  --size-mini:     clamp(0.7rem, 0.9vw, 0.8rem);

  /* — Tracking — */
  --tracking-overline: 0.35em;
  --tracking-bebas:    0.02em;
  --tracking-widest:   0.25em;
  --tracking-tight:    -0.02em;

  /* — Spacing — */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* — Layout — */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 100px;

  /* — Shadows e glows — */
  --glow-cyan-sm:    0 0 14px rgba(0,255,255,0.4);
  --glow-cyan-md:    0 0 30px rgba(0,255,255,0.5);
  --glow-cyan-lg:    0 0 60px rgba(0,255,255,0.6);
  --glow-magenta-sm: 0 0 14px rgba(255,20,147,0.4);
  --glow-magenta-md: 0 0 30px rgba(255,20,147,0.5);
  --glow-magenta-lg: 0 0 60px rgba(255,20,147,0.6);

  --focus-ring: 0 0 0 3px rgba(0,255,255,0.45);

  /* — Motion — */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-pulse:    cubic-bezier(0.4, 0, 0.6, 1);
  --dur-fast:   .25s;
  --dur-base:   .55s;
  --dur-slow:   .9s;

  /* — Game-specific — */
  --typewriter-speed: 40ms;       /* delay por caractere ARIA */
  --terminal-width:    380px;     /* largura terminal ARIA mini */
  --inventory-height:  140px;     /* altura inventário lateral */
  --timer-bg:          rgba(255,20,147,0.12);
  --timer-bg-warning:  rgba(255,20,147,0.30);

  /* — Layers (z-index) — */
  --z-base:     1;
  --z-bokeh:    2;
  --z-content:  10;
  --z-overlay:  100;
  --z-terminal: 200;
  --z-modal:    1000;
  --z-toast:    2000;
}

/* — Reset mínimo — */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; height: 100%; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-dark-3);
  background-image: var(--gradient-bg);
  font-family: var(--font-sans);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  overflow: hidden; /* jogo é full-screen, sem scroll global */
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

button:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

::selection {
  background: var(--cyan-25);
  color: var(--white);
}

/* — Utilitários de tipografia — */
.font-display { font-family: var(--font-display); letter-spacing: var(--tracking-bebas); }
.font-serif   { font-family: var(--font-serif); }
.font-mono    { font-family: var(--font-mono); }

.text-cyan    { color: var(--cyan); }
.text-magenta { color: var(--magenta); }
.text-purple  { color: var(--purple-bright); }
.text-cream   { color: var(--cream); }
.text-soft    { color: var(--cream-soft); }
.text-mute    { color: var(--gray-light); }

.glow-cyan    { text-shadow: var(--glow-cyan-md); }
.glow-magenta { text-shadow: var(--glow-magenta-md); }

.uppercase { text-transform: uppercase; letter-spacing: var(--tracking-widest); }