/* ===========================
   DESIGN TOKENS / VARIABLES
   =========================== */
:root {
  /* ---- Color Palette ---- */
  --color-bg:           #0B0804;
  --color-bg-section:   #111008;
  --color-bg-section-2: #0D0A06;
  --color-accent:       #E87A2D;
  --color-accent-dark:  #C4621A;
  --color-accent-glow:  rgba(232, 122, 45, 0.35);
  --color-white:        #FFFFFF;
  --color-text:         rgba(255,255,255,0.92);
  --color-text-muted:   rgba(255,255,255,0.45);
  --color-text-dim:     rgba(255,255,255,0.22);
  --color-border:       rgba(255,255,255,0.08);
  --color-border-hover: rgba(255,255,255,0.18);

  /* ---- Glass ---- */
  --glass-bg:           rgba(255,255,255,0.05);
  --glass-bg-hover:     rgba(255,255,255,0.09);
  --glass-border:       rgba(255,255,255,0.10);
  --glass-blur:         16px;

  /* ---- Typography ---- */
  --font-heading: 'Syne', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ---- Font Sizes (fluid) ---- */
  --fs-xs:   clamp(0.65rem, 1vw, 0.75rem);
  --fs-sm:   clamp(0.75rem, 1.2vw, 0.875rem);
  --fs-base: clamp(0.875rem, 1.5vw, 1rem);
  --fs-md:   clamp(1rem, 1.8vw, 1.125rem);
  --fs-lg:   clamp(1.125rem, 2vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 3vw, 2rem);
  --fs-2xl:  clamp(2rem, 5vw, 3.5rem);
  --fs-3xl:  clamp(3rem, 7vw, 5.5rem);
  --fs-4xl:  clamp(4rem, 10vw, 8rem);

  /* ---- Spacing ---- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;
  --space-4xl: 8rem;

  /* ---- Layout ---- */
  --max-width: 1400px;
  --navbar-h:  72px;

  /* ---- Radii ---- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ---- Transitions ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-mid:  400ms;
  --duration-slow: 700ms;

  /* ---- Shadows ---- */
  --shadow-accent: 0 0 40px var(--color-accent-glow);
  --shadow-card:   0 8px 40px rgba(0,0,0,0.4);
}