:root {
  /* Brand palette: flame (Phoenix) + circuit (Tech) */
  --flame-500: #ff5f2e;
  --flame-600: #ef4136;
  --flame-glow: #ff8a3d;
  --cyan-400: #2fd7e0;
  --cyan-500: #17b8d6;
  --blue-600: #2454ff;

  --ink-900: #05070c;
  --ink-800: #0a0e17;
  --ink-700: #10151f;
  --ink-600: #171d2b;
  --ink-border: #232a3a;

  --paper-0: #ffffff;
  --paper-50: #f7f8fb;
  --paper-100: #eef0f5;
  --paper-border: #e3e6ee;

  --text-900: #0a0e17;
  --text-600: #4a5165;
  --text-400: #8992a6;
  --text-on-dark: #eef1f8;
  --text-on-dark-muted: #a7aec2;

  --grad-flame: linear-gradient(135deg, var(--flame-500), var(--flame-glow) 60%, #ffb347);
  --grad-tech: linear-gradient(135deg, var(--blue-600), var(--cyan-400));
  --grad-hero: radial-gradient(60% 60% at 15% 10%, rgba(255, 95, 46, 0.22), transparent 60%),
    radial-gradient(50% 50% at 90% 20%, rgba(47, 215, 224, 0.18), transparent 60%),
    linear-gradient(180deg, var(--ink-900), var(--ink-800));

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 20px 60px -20px rgba(10, 14, 23, 0.35);
  --shadow-lift: 0 30px 80px -30px rgba(10, 14, 23, 0.45);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.55s;
  --dur-slow: 0.9s;

  --container: 1240px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);

  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}