/* ============================================================
   TOKENS.CSS — LC Publicités Design System Tokens v2
   Stitch-inspired: clean white surfaces + teal/purple kinetic
   Gold retained as LC Pub signature CTA brand accent
   ============================================================ */

:root {
  /* ── COLOR: Backgrounds (Stitch: clean white/near-white) ── */
  --color-bg-primary:    #FFFFFF;
  --color-bg-secondary:  #F8F9FA;
  --color-bg-card:       #FFFFFF;
  --color-bg-elevated:   #F3F4F5;
  --color-bg-dark:       #191C1D;
  --color-bg-dark-alt:   #0D1B2A;

  /* ── SURFACES ─────────────────────────────────────────────── */
  --color-surface:                  #F8F9FA;
  --color-surface-container:        #EDEEEF;
  --color-surface-container-low:    #F3F4F5;
  --color-surface-container-high:   #E7E8E9;
  --color-surface-container-highest:#E1E3E4;

  /* ── COLOR: Gold (LC Pub Brand — CTAs & Signature) ────────── */
  --color-gold:          #C9A84C;
  --color-gold-bright:   #D4B55A;
  --color-gold-dark:     #A8882E;
  --color-gold-glow:     rgba(201,168,76,0.22);
  --color-gold-subtle:   rgba(201,168,76,0.10);

  /* ── COLOR: Primary — Kinetic Purple (Stitch) ─────────────── */
  --color-primary:       #4800B2;
  --color-primary-mid:   #6200EE;
  --color-primary-light: rgba(72,0,178,0.08);
  --color-primary-glow:  rgba(72,0,178,0.25);

  /* ── COLOR: Secondary — Teal (Stitch) ────────────────────── */
  --color-secondary:     #006875;
  --color-secondary-vivid: #00E3FD;
  --color-secondary-light: rgba(0,104,117,0.10);
  --color-secondary-glow:  rgba(0,104,117,0.30);

  /* ── COLOR: On-surface ───────────────────────────────────── */
  --color-on-surface:         #191C1D;
  --color-on-surface-variant: #494456;

  /* ── COLOR: Borders ──────────────────────────────────────── */
  --color-border:       rgba(25,28,29,0.10);
  --color-border-hover: rgba(201,168,76,0.50);
  --color-border-glow:  rgba(0,104,117,0.35);

  /* ── COLOR: Text ─────────────────────────────────────────── */
  --color-text-primary:   #191C1D;
  --color-text-secondary: #494456;
  --color-text-muted:     #6B7280;

  /* ── COLOR: Utility ──────────────────────────────────────── */
  --color-success:   #4CAF50;
  --color-error:     #E05555;
  --color-white:     #FFFFFF;
  --color-navy-deep: #0D1B2A;
  --color-navy-mid:  #1A2B4E;

  /* ── GRADIENTS ───────────────────────────────────────────── */
  --gradient-kinetic: linear-gradient(135deg, #4800B2 0%, #6200EE 100%);
  --gradient-gold:    linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-bright) 100%);
  --gradient-dark:    linear-gradient(160deg, #191C1D 0%, #0D1B2A 100%);
  --gradient-teal:    linear-gradient(135deg, #006875 0%, #00E3FD 100%);
  --gradient-hero-orb-1: radial-gradient(circle, rgba(0,104,117,0.40) 0%, rgba(72,0,178,0.18) 50%, transparent 70%);
  --gradient-hero-orb-2: radial-gradient(circle, rgba(72,0,178,0.30) 0%, rgba(0,104,117,0.12) 45%, transparent 70%);

  /* ── TYPOGRAPHY: Font Families ───────────────────────────── */
  --font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-label:   'Manrope', system-ui, sans-serif;

  /* ── TYPOGRAPHY: Font Sizes ──────────────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   clamp(20px, 2.5vw, 24px);
  --text-xl:   clamp(24px, 3vw, 32px);
  --text-2xl:  clamp(32px, 4vw, 44px);
  --text-3xl:  clamp(40px, 5vw, 56px);
  --text-4xl:  clamp(52px, 6.5vw, 80px);
  --text-hero: clamp(44px, 6.5vw, 88px);

  /* ── TYPOGRAPHY: Line Heights ────────────────────────────── */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* ── TYPOGRAPHY: Letter Spacing ──────────────────────────── */
  --tracking-tight:   -0.03em;
  --tracking-normal:  -0.01em;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.12em;

  /* ── SPACING (8px base grid) ─────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;

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

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --shadow-sm:      0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.05);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.06);
  --shadow-lg:      0 12px 40px rgba(0,0,0,0.12), 0 24px 64px rgba(0,0,0,0.08);
  --shadow-gold:    0 8px 32px rgba(201,168,76,0.30);
  --shadow-gold-lg: 0 16px 64px rgba(201,168,76,0.40);
  --shadow-teal:    0 8px 32px rgba(0,104,117,0.25);
  --shadow-purple:  0 8px 32px rgba(72,0,178,0.20);
  --shadow-glass:   0 8px 32px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);

  /* ── MOTION: Durations ───────────────────────────────────── */
  --duration-instant:  80ms;
  --duration-fast:    150ms;
  --duration-default: 280ms;
  --duration-slow:    500ms;
  --duration-slower:  800ms;
  --duration-slowest: 1200ms;

  /* ── MOTION: Easings ─────────────────────────────────────── */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:     cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-expo:       cubic-bezier(0.16, 1, 0.3, 1);

  /* ── BREAKPOINTS (reference) ─────────────────────────────── */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
}