/* ============================================================
   IGNYSS V2 — Design Tokens
   Award-worthy design system
   ============================================================ */

:root {
  /* ── Core Palette ─────────────────────────────────────── */
  --bg-void:        #08080F;
  --bg-deep:        #0C0C16;
  --bg-primary:     #0E0E1A;
  --bg-elevated:    #131322;
  --bg-surface:     #181830;
  --bg-panel:       #1C1C34;

  --border-ghost:   rgba(255,255,255,0.04);
  --border-subtle:  rgba(255,255,255,0.07);
  --border-muted:   rgba(255,255,255,0.10);
  --border-accent:  rgba(244,115,42,0.25);

  /* ── Brand Colors ─────────────────────────────────────── */
  --orange:         #F4732A;
  --orange-light:   #FF8A4C;
  --orange-dark:    #D45E1A;
  --gold:           #E8A838;
  --gold-light:     #F0BE5E;
  --blue:           #5B8CFF;
  --blue-light:     #7EA6FF;
  --violet:         #8B5CF6;
  --green:          #22C55E;
  --red:            #EF4444;

  /* ── Glows ────────────────────────────────────────────── */
  --glow-orange:    rgba(244,115,42,0.12);
  --glow-orange-md: rgba(244,115,42,0.20);
  --glow-orange-lg: rgba(244,115,42,0.35);
  --glow-blue:      rgba(91,140,255,0.10);
  --glow-gold:      rgba(232,168,56,0.10);
  --glow-violet:    rgba(139,92,246,0.10);

  /* ── Gradients ────────────────────────────────────────── */
  --grad-orange:    linear-gradient(135deg, #F4732A 0%, #E8A838 100%);
  --grad-hero:      linear-gradient(135deg, #F4732A 0%, #E8A838 40%, #5B8CFF 100%);
  --grad-blue:      linear-gradient(135deg, #5B8CFF 0%, #8B5CF6 100%);
  --grad-surface:   linear-gradient(180deg, rgba(244,115,42,0.03) 0%, transparent 50%);
  --grad-radial-o:  radial-gradient(circle, rgba(244,115,42,0.15), transparent 70%);
  --grad-radial-b:  radial-gradient(circle, rgba(91,140,255,0.12), transparent 70%);
  --grad-radial-g:  radial-gradient(circle, rgba(232,168,56,0.10), transparent 70%);

  /* ── Text ─────────────────────────────────────────────── */
  --c-white:        #FFFFFF;
  --c-primary:      #F0F0F8;
  --c-body:         #C8CAD8;
  --c-muted:        #8488A0;
  --c-dim:          #50546E;
  --c-ghost:        #33364E;

  /* ── Typography ───────────────────────────────────────── */
  --ff-display:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-mono:        'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;
  --fw-black:       900;

  /* Fluid scale — each step adapts to viewport */
  --fs-hero:        clamp(3.8rem,  1.8rem + 8vw,   9rem);
  --fs-h1:          clamp(3rem,    1.5rem + 6vw,    7rem);
  --fs-h2:          clamp(2.4rem,  1.2rem + 4.5vw,  5rem);
  --fs-h3:          clamp(1.8rem,  1rem + 3vw,      3.2rem);
  --fs-h4:          clamp(1.4rem,  0.9rem + 2vw,    2.2rem);
  --fs-h5:          clamp(1.15rem, 0.85rem + 1.2vw, 1.6rem);
  --fs-body:        clamp(0.95rem, 0.85rem + 0.4vw, 1.1rem);
  --fs-body-lg:     clamp(1.05rem, 0.9rem + 0.6vw,  1.25rem);
  --fs-body-xl:     clamp(1.15rem, 0.95rem + 0.8vw, 1.4rem);
  --fs-small:       clamp(0.8rem,  0.72rem + 0.3vw, 0.88rem);
  --fs-caption:     clamp(0.7rem,  0.65rem + 0.2vw, 0.78rem);
  --fs-overline:    clamp(0.65rem, 0.6rem + 0.15vw,  0.72rem);

  --lh-tight:       0.95;
  --lh-snug:        1.1;
  --lh-normal:      1.6;
  --lh-relaxed:     1.8;

  --ls-tight:       -0.04em;
  --ls-snug:        -0.02em;
  --ls-normal:      0;
  --ls-wide:        0.06em;
  --ls-wider:       0.12em;
  --ls-widest:      0.2em;

  /* ── Spacing ──────────────────────────────────────────── */
  --s-2xs:  0.125rem;
  --s-xs:   0.25rem;
  --s-sm:   0.5rem;
  --s-md:   1rem;
  --s-lg:   1.5rem;
  --s-xl:   2rem;
  --s-2xl:  3rem;
  --s-3xl:  4.5rem;
  --s-4xl:  6rem;
  --s-5xl:  8rem;
  --s-6xl:  12rem;
  --s-section: clamp(6rem, 14vw, 12rem);

  /* ── Layout ───────────────────────────────────────────── */
  --max-w:          1280px;
  --max-w-narrow:   860px;
  --max-w-wide:     1500px;
  --max-w-ultra:    1800px;
  --gutter:         clamp(1.5rem, 5vw, 4rem);

  /* ── Radius ───────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.15);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.25);
  --shadow-xl:    0 16px 64px rgba(0,0,0,0.5), 0 8px 16px rgba(0,0,0,0.3);
  --shadow-glow:  0 0 80px rgba(244,115,42,0.08);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ── Glass ────────────────────────────────────────────── */
  --glass-bg:      rgba(14,14,26,0.55);
  --glass-bg-lg:   rgba(14,14,26,0.7);
  --glass-border:  rgba(255,255,255,0.06);
  --glass-blur:    24px;

  /* ── Motion ───────────────────────────────────────────── */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:      cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:      cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --dur-instant:  0.1s;
  --dur-fast:     0.2s;
  --dur-base:     0.35s;
  --dur-slow:     0.6s;
  --dur-reveal:   0.9s;
  --dur-dramatic: 1.4s;

  /* ── Z-Index ──────────────────────────────────────────── */
  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-sticky:  200;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-max:     9999;
}