/* ==========================================================================
   FeelFree Agency — variables.css
   Complete design token system
   ========================================================================== */

:root {
  /* ----- Color ----- */
  --color-bg: #111111;
  --color-bg-soft: #151515;
  --color-bg-softer: #1b1b1b;
  --color-bg-raised: #222222;

  --color-surface: rgba(255, 255, 255, 0.04);
  --color-surface-hover: rgba(255, 255, 255, 0.07);

  --color-text: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.72);
  --color-text-muted: rgba(255, 255, 255, 0.46);
  --color-text-faint: rgba(255, 255, 255, 0.28);

  --color-accent: #ff7862;
  --color-accent-soft: rgba(255, 120, 98, 0.16);
  --color-accent-glow: rgba(255, 120, 98, 0.25);
  --color-accent-faint: rgba(255, 120, 98, 0.07);
  --color-accent-warm: #ffa088;

  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-soft: rgba(255, 255, 255, 0.06);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-error: #ff6b6b;
  --color-success: #7dd6a5;

  /* ----- Radius ----- */
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-xl: 48px;
  --radius-pill: 999px;

  /* ----- Layout ----- */
  --container-width: 1500px;
  --container-wide: 1720px;
  --container-narrow: 880px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* ----- Spacing scale ----- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-section: clamp(7rem, 14vw, 15rem);
  --space-section-sm: clamp(5rem, 9vw, 9rem);

  /* ----- Type scale (fluid) ----- */
  --font-sans: "Bricolage Grotesque", "Bricolage Grotesque Variable", sans-serif;

  --text-hero: clamp(3.1rem, 7.4vw, 6.6rem);       /* 50 → 106 */
  --text-display: clamp(2.6rem, 5.4vw, 4.6rem);     /* 42 → 74 */
  --text-title: clamp(2rem, 3.8vw, 3.6rem);         /* 32 → 58 */
  --text-heading: clamp(1.55rem, 2.4vw, 2.2rem);    /* 25 → 35 */
  --text-lead: clamp(1.15rem, 1.5vw, 1.375rem);     /* 18 → 22 */
  --text-body: clamp(1.05rem, 1.2vw, 1.1875rem);    /* 17 → 19 */
  --text-small: 0.9375rem;                          /* 15 */
  --text-tiny: 0.8125rem;                           /* 13 */

  --leading-tight: 1.02;
  --leading-snug: 1.12;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;
  --tracking-wide: 0.14em;

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.35s;
  --duration-base: 0.6s;
  --duration-slow: 0.9s;
  --duration-cinematic: 1.2s;

  /* ----- Shadows ----- */
  --shadow-soft:
    0 2px 8px rgba(0, 0, 0, 0.25),
    0 16px 48px rgba(0, 0, 0, 0.35);
  --shadow-lift:
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 32px 80px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 60px var(--color-accent-glow);
  --shadow-glow-soft: 0 8px 40px rgba(255, 120, 98, 0.18);

  /* ----- Glass ----- */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-blur: 24px;

  /* ----- Nav ----- */
  --nav-height: 84px;
  --nav-height-compact: 66px;
}