/* =================================================================
   MUJMA TACTICAL — v7.0 EXTREME EDITION
   Senior Extreme Programmer 2026 Rebuild
   Features: @layer, @property, View Transitions, Scroll-Driven,
             @starting-style, OKLCH, linear() easing, 3D Tilt
   ================================================================= */

@layer tokens, reset, base, components, animations, responsive, overrides;

/* ============================================
   TOKENS - Single Source of Truth
   ============================================ */
@layer tokens {
  :root {
    --gold: #d4af37;
    --gold-h: 45;
    --gold-dark: #b5952f;
    --gold-rgb: 212 175 55;
    --bg-0: #0a0a0a;
    --bg-1: #0e0e0e;
    --bg-2: #141414;
    --bg-3: #1a1a1a;
    --line: #1f1f1f;
    --line-2: #2a2a2a;
    --text: #fff;
    --muted: #b0b0b0;
    --dim: #888;
    --radius: 12px;
    --radius-sm: 6px;
    --radius-lg: 16px;
    --ease-spring: linear(0, 0.003 0.9%, 0.011 1.8%, 0.035 3.6%, 0.155 6.8%, 0.59 13.1%, 0.825 14.9%, 0.947 16.4%, 1.021 17.9%, 1.071 19.4%, 1.101 20.9%, 1.114 22.4%, 1.115 26%, 1.066 30.6%, 0.992 35.1%, 0.921 37.5%, 0.854 40%, 0.805 42.5%, 0.775 45.1%, 0.758 46.8%, 0.745 48.9%, 0.739 51.3%, 0.739 53.9%, 0.752 57.3%, 0.79 61.2%, 0.968 78.5%, 1.011 86.6%, 1 100%);
    --ease-out: cubic-bezier(.16,1,.3,1);
    --ease-tactical: cubic-bezier(.4,0,.2,1);
  }

  @property --gold-glow {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
  }
  @property --tilt-x {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
  }
  @property --til