/* ─── Design Tokens — Dark Premium 2026 ─────────────────── */

:root {
  /* ── Background layers ──────────────────────────────────── */
  --bg:         #050506;
  --bg-2:       #0D0D14;
  --bg-3:       #121218;
  --bg-card:    rgba(255,255,255,0.055);
  --bg-card-2:  rgba(255,255,255,0.025);
  --bg-card-elevated: rgba(255,255,255,0.09);
  --bg-glass:   rgba(255,255,255,0.065);

  /* ── Text ───────────────────────────────────────────────── */
  --ink-1:  rgba(255, 255, 255, 0.94);
  --ink-2:  rgba(255, 255, 255, 0.62);
  --ink-3:  rgba(255, 255, 255, 0.38);
  --ink-4:  rgba(255, 255, 255, 0.20);

  /* ── Accent — warm amber, luminous ─────────────────────── */
  --accent:       #E8813A;
  --accent-hi:    #F5A050;
  --accent-lo:    #C06820;
  --accent-glow:  rgba(232, 129, 58, 0.22);
  --accent-bg:    rgba(232, 129, 58, 0.10);
  --accent-border:rgba(232, 129, 58, 0.30);

  /* ── Secondary accent — cool blue-violet ────────────────── */
  --secondary:        #6B7AE8;
  --secondary-glow:   rgba(107,122,232,0.15);
  --secondary-bg:     rgba(107,122,232,0.08);
  --secondary-border: rgba(107,122,232,0.18);

  /* ── Borders & shadows ──────────────────────────────────── */
  --border:     rgba(255, 255, 255, 0.08);
  --border-2:   rgba(255, 255, 255, 0.13);
  --border-acc: rgba(232, 129, 58, 0.35);

  --shadow-1:  0 2px 8px  rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2:  0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.40);
  --shadow-3:  0 24px 64px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.45);
  --glow-acc:  0 0 80px rgba(232,129,58,0.30), 0 0 32px rgba(232,129,58,0.18);
  --shadow-glow-amber: 0 0 60px rgba(232,129,58,0.16), 0 0 120px rgba(232,129,58,0.08);
  --shadow-glow-blue:  0 0 60px rgba(107,122,232,0.12), 0 0 120px rgba(107,122,232,0.06);

  /* ── Danger ────────────────────────────────────────────────── */
  --danger: #FF5050;
  --danger-glow: rgba(255,80,80,0.25);
  --danger-bg: rgba(255,80,80,0.10);
  --danger-border: rgba(255,80,80,0.30);

  /* ── Typography ─────────────────────────────────────────── */
  --font:      -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* ── Spacing / layout ──────────────────────────────────── */
  --container: 1200px;
  --pad:       clamp(20px, 4.5vw, 60px);

  /* ── Motion ─────────────────────────────────────────────── */
  --spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease:   cubic-bezier(0.25, 0.1, 0.25, 1);
  --fast:   140ms;
  --mid:    260ms;
  --slow:   460ms;

  /* ── Radius ──────────────────────────────────────────────── */
  --r-xs: 4px;   --r-sm: 8px;  --r-md: 12px;
  --r-lg: 18px;  --r-xl: 28px; --r-max: 999px;
}

/* ── Base ───────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink-1);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

::selection {
  background: rgba(232, 129, 58, 0.25);
  color: #fff;
}

/* ── Global noise texture overlay ─────────────────────── */
.page-noise {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  opacity: 0.4;
  mix-blend-mode: overlay;
  will-change: opacity;
}