/* ============================================================
   DESIGN TOKENS — Shan Asharaf Portfolio
   Pure black, glossy surfaces, fluid candy-red accents
   ============================================================ */

:root {
  /* ── Pure Black & Glossy Obsidian Surfaces ───────────────── */
  --bg-base:      #000000;
  --bg-surface-0: #0a0a0a;
  --bg-surface-1: #0f0f13;
  --bg-surface-2: #15151a;
  --bg-glass:     rgba(8, 8, 10, 0.78);
  --line-subtle:  rgba(255, 255, 255, 0.08);
  --line-gloss:   rgba(255, 255, 255, 0.16);

  /* ── Candy-Red Accent System ──────────────────────────────── */
  --candy-red:      #ff1744;
  --candy-red-hi:   #ff4569;
  --candy-red-deep: #d90429;
  --candy-red-dark: #8b0000;
  --candy-glow:     rgba(255, 23, 68, 0.45);
  --candy-edge:     rgba(255, 23, 68, 0.32);
  --candy-tint:     rgba(255, 23, 68, 0.08);

  /* ── Typography & Ink ─────────────────────────────────────── */
  --text-primary:   #f5f5f5;
  --text-secondary: #c9c9d2;
  --text-muted:     #888894;

  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Glossy Elevation & Soft Inset Glows ──────────────────── */
  --shadow-card:  0 18px 45px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --shadow-glow:  0 22px 60px rgba(0, 0, 0, 0.95), 0 0 35px var(--candy-glow), 0 0 0 1px var(--candy-edge);
  --inset-gloss:  inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.5);

  /* ── Easing Curves ────────────────────────────────────────── */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout & Geometry ────────────────────────────────────── */
  --max-w: 1280px;
  --pad-x: clamp(20px, 5.5vw, 68px);
  --pad-y: clamp(92px, 12vw, 155px);
  --gutter: 32px;
  --nav-h: 72px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
}