/**
 * Jetons de design — source unique pour le marketing et les pages publiques alignées (home, generator-app, public-experience).
 * Polices : charger Manrope + Space Grotesk dans le document (ex. home.php).
 */
:root {
    --font-body: 'Manrope', system-ui, sans-serif;
    --font-display: 'Space Grotesk', system-ui, sans-serif;

    /* Échelle typo (corps + titres) */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: clamp(1.5rem, 4vw, 2rem);
    --text-hero: clamp(2.5rem, 8vw, 4rem);

    /* Grille d’espacement (multiples de 4px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    --bg-primary: #0a0e27;
    --bg-secondary: #13192e;
    --bg-tertiary: #1a2847;
    --text-primary: #ffffff;
    --text-secondary: #e0e7ff;
    --text-muted: #a5adc9;
    --border-color: rgba(255, 255, 255, 0.13);
    --ui-stroke: rgba(255, 255, 255, 0.15);
    --ui-stroke-mid: rgba(255, 255, 255, 0.1);
    --ui-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --ui-radius-shell: 22px;
    --ui-radius-card: 18px;
    --ui-radius-pill: 14px;

    --accent-cyan: #22d3ee;
    --accent-blue: #0ea5e9;
    /* Violet réel (boutons secondaires, dégradés magenta/violet) */
    --accent-violet: #a855f7;
    /* Orange / ambre (accents chauds — anciennement --accent-purple sur la home) */
    --accent-warm: #f97316;
    --accent-gold: #fbbf24;

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);

    --public-radius-pill: 999px;
    --public-radius-card: 16px;
    --public-border-soft: rgba(255, 255, 255, 0.12);

    --focus-ring: 3px solid rgba(34, 211, 238, 0.55);
    --focus-offset: 3px;

    --motion-duration-fast: 0.18s;
    --motion-duration-normal: 0.3s;
    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-tertiary: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #1e293b;
    --text-muted: #64748b;
    --border-color: rgba(15, 23, 42, 0.1);
    --ui-stroke: rgba(15, 23, 42, 0.12);
    --ui-stroke-mid: rgba(15, 23, 42, 0.08);
    --ui-inset: inset 0 1px 0 rgba(255, 255, 255, 0.95);
    --accent-cyan: #0891b2;
    --accent-blue: #0369a1;
    --accent-violet: #7c3aed;
    --accent-warm: #c2410c;
    --accent-gold: #d97706;
    --public-border-soft: rgba(15, 23, 42, 0.12);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.15);
    --focus-ring: 3px solid rgba(8, 145, 178, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-duration-fast: 0.01ms;
        --motion-duration-normal: 0.01ms;
    }
}