/*
 * Webmakkers — Design Tokens
 * Cyberpunk rebrand v1 (2026-06-07)
 *
 * Source: approved spec + prototype v3.html
 * Usage: imported before components.css; all components reference these vars.
 * Do NOT hardcode colors or spacing — always use a token.
 */

/* ─── Custom Properties ──────────────────────────────────────────────────── */
:root {
  /* Midnight-blue base */
  --bg-deepest:   #070a1c;
  --bg-base2:     #0a0e26;
  --bg-surface:   #10153a;
  --bg-elevated:  #161d52;
  --bg-border:    #2b357a;

  /* Glass helpers */
  --glass:        rgba(16,21,58,.45);
  --glass-strong: rgba(16,21,58,.66);

  /* Color-block sections (single tint; .seam carries the structural variant) */
  --block-cyan:    #06182e;

  /* Text */
  --text-primary: #eef1ff;
  --text-muted:   #9aa6d8;
  --text-dim:     #5a64a0;

  /* Brand / CTA — aqua */
  --aqua:      #45cdec;
  --aqua-dim:  #2a8fa8;
  --aqua-glow: #45cdec55;

  /* Accent — magenta */
  --magenta:      #f23cff;
  --magenta-dim:  #a72fc0;
  --magenta-glow: #f23cff44;

  /* Semantic */
  --success: #1fd99a;
  --error:   #ff4d6d;

  /* Heat accent — amber-orange (cyber.png hot details: meter peaks, ticks) */
  --heat:      #ff9e4d;
  --heat-dim:  #b9622a;
  --heat-glow: #ff9e4d44;

  /* Typography */
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-mono:    'Space Mono', ui-monospace, monospace;
  --f-body:    'Inter', system-ui, sans-serif;

  /* Layout */
  --maxw:   1200px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Effect toggles (overridden by reduced-motion query below) */
  --glow:         1;
  --orb-opacity:  1;
  --matrix-opacity: 0.6;
  --scan-opacity: 0.05;
  --grid-opacity: 1;
  --glass-blur:   14px;
}

/* ─── Minimal Reset ──────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Base Element Styles ────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  background:              var(--bg-deepest);
  color:                   var(--text-primary);
  font-family:             var(--f-body);
  font-size:               17px;
  line-height:             1.65;
  -webkit-font-smoothing:  antialiased;
  overflow-x:              hidden;
}

/* Ambient colour orb field — fixed, GPU-cheap (background only) */
body::before {
  content:  "";
  position: fixed;
  inset:    0;
  z-index:  -1;
  background:
    radial-gradient(ellipse 50% 50% at 12%   8%, #45cdec22 0%, transparent 55%),
    radial-gradient(ellipse 55% 50% at 88%  18%, #f23cff22 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 100%, #6b2cff1f 0%, transparent 60%),
    var(--bg-deepest);
  opacity: var(--orb-opacity);
}

/* Film-grain noise overlay */
body::after {
  content:        "";
  position:       fixed;
  inset:          0;
  pointer-events: none;
  z-index:        9996;
  opacity:        0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a {
  color:           var(--aqua);
  text-decoration: none;
}

a:focus-visible {
  outline:        2px solid var(--aqua);
  outline-offset: 3px;
  border-radius:  3px;
}

h1, h2, h3 {
  font-family:     var(--f-display);
  font-weight:     700;
  line-height:     1.02;
  letter-spacing:  -.025em;
}

/* Monospace helper */
.mono {
  font-family: var(--f-mono);
}

/* Italic emphasis in headings */
i.em {
  color:       var(--magenta);
  font-style:  italic;
  text-shadow: 0 0 calc(26px * var(--glow)) var(--magenta-glow);
}

/* Centred container */
.wrap {
  max-width: var(--maxw);
  margin:    0 auto;
  padding:   0 clamp(20px, 3.5vw, 44px);
}

/* Gradient text utility */
.grad {
  background:             linear-gradient(100deg, var(--aqua), var(--magenta));
  -webkit-background-clip: text;
  background-clip:         text;
  color:                   transparent;
}

/* Mono label (HUD / section labels) */
.label {
  font-family:    var(--f-mono);
  font-size:      12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--aqua);
}

section {
  position: relative;
}

/* ─── Scanline Overlay ───────────────────────────────────────────────────── */
.scan {
  position:       fixed;
  inset:          0;
  pointer-events: none;
  z-index:        9997;
  opacity:        var(--scan-opacity);
  background:     repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 3px);
}

/* ─── Glass Helper ───────────────────────────────────────────────────────── */
.glass {
  background:                 var(--glass);
  backdrop-filter:            blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter:    blur(var(--glass-blur)) saturate(1.25);
  border:                     1px solid var(--bg-border);
}

/* ─── Prefers-Reduced-Motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --glow:           0;
    --orb-opacity:    0;
    --matrix-opacity: 0;
    --scan-opacity:   0;
    --grid-opacity:   0;
  }

  /* Disable all transitions/animations by default; components re-declare if needed */
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}