/* =============================================================
   CAVAGNO AGENCY — DESIGN SYSTEM "AURORA PREMIUM"
   tokens.css — fondations : couleurs, typo, espacements, motion
   -------------------------------------------------------------
   Philosophie : on garde l'ADN néon/TikTok (magenta + cyan) mais
   on le MAÎTRISE. Le néon devient un accent rare et précis, posé
   sur une base sombre mature et beaucoup d'air. Hiérarchie forte,
   données mises en scène, motion utile. Light mode réel inclus.
   ============================================================= */

:root {
    /* ---- Couleurs de marque (signal néon maîtrisé) ---- */
    --magenta: #FF2E63;     /* signal chaud principal */
    --magenta-soft: #ff5c86;
    --cyan: #25F4EE;        /* signal froid TikTok */
    --violet: #7C5CFF;      /* pont entre les deux, accent */
    --aurora-pink: rgba(255, 46, 99, 0.55);
    --aurora-cyan: rgba(37, 244, 238, 0.40);
    --aurora-violet: rgba(124, 92, 255, 0.45);

    /* Dégradés (usage parcimonieux : titres clés, CTA, traits) */
    --grad-signal: linear-gradient(100deg, #FF2E63 0%, #7C5CFF 55%, #25F4EE 100%);
    --grad-warm: linear-gradient(120deg, #FF2E63, #ff7a3c);
    --grad-cool: linear-gradient(120deg, #7C5CFF, #25F4EE);

    /* ---- Surfaces (DARK par défaut) ---- */
    --ink: #0A0B14;          /* fond le plus profond (pas de noir pur) */
    --bg: #0C0E1A;           /* fond de page */
    --bg-2: #111426;         /* sections alternées */
    --surface: #151931;      /* cartes */
    --surface-2: #1B2042;    /* cartes survolées / élévation */
    --surface-glass: rgba(255, 255, 255, 0.045);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);

    /* ---- Texte ---- */
    --text: #F2F3FA;
    --text-soft: rgba(242, 243, 250, 0.74);
    --text-mute: rgba(242, 243, 250, 0.52);
    --text-on-accent: #0A0B14;

    /* ---- Sémantique conformité (Live Safety) ---- */
    --ok: #2BD98A;
    --ok-bg: rgba(43, 217, 138, 0.12);
    --warn: #FFB23E;
    --warn-bg: rgba(255, 178, 62, 0.12);
    --danger: #FF3B5C;
    --danger-bg: rgba(255, 59, 92, 0.13);
    --info: #4FC3F7;
    --info-bg: rgba(79, 195, 247, 0.12);

    /* ---- Typographie ---- */
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* Échelle fluide (clamp) — hiérarchie forte */
    --fs-display: clamp(2.6rem, 1.4rem + 5.2vw, 5.25rem);
    --fs-h1: clamp(2.2rem, 1.3rem + 3.8vw, 3.9rem);
    --fs-h2: clamp(1.8rem, 1.2rem + 2.4vw, 2.85rem);
    --fs-h3: clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem);
    --fs-h4: clamp(1.1rem, 1rem + 0.5vw, 1.28rem);
    --fs-lead: clamp(1.08rem, 1rem + 0.5vw, 1.32rem);
    --fs-body: 1.0625rem;
    --fs-sm: 0.9375rem;
    --fs-xs: 0.8125rem;
    --fs-eyebrow: 0.78rem;

    --lh-tight: 1.08;
    --lh-snug: 1.28;
    --lh-body: 1.68;

    /* ---- Espacements (base 4px) ---- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
    --sp-10: 8rem;
    --section-y: clamp(4rem, 2rem + 8vw, 8rem);

    /* ---- Rayons ---- */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 34px;
    --r-full: 999px;

    /* ---- Élévation & lueurs ---- */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 12px 30px -12px rgba(0,0,0,0.6);
    --shadow-lg: 0 30px 70px -24px rgba(0,0,0,0.75);
    --glow-magenta: 0 0 40px -6px rgba(255, 46, 99, 0.45);
    --glow-cyan: 0 0 40px -6px rgba(37, 244, 238, 0.4);

    /* ---- Layout ---- */
    --container: 1200px;
    --container-narrow: 820px;
    --header-h: 76px;

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 0.18s;
    --t-mid: 0.35s;
    --t-slow: 0.7s;
}

/* ---- LIGHT MODE ---- */
[data-theme="light"] {
    --ink: #ECEEF6;
    --bg: #F5F6FB;
    --bg-2: #EDEFF7;
    --surface: #FFFFFF;
    --surface-2: #F1F3FB;
    --surface-glass: rgba(10, 11, 20, 0.03);
    --border: rgba(10, 11, 20, 0.10);
    --border-strong: rgba(10, 11, 20, 0.18);
    --text: #14182B;
    --text-soft: rgba(20, 24, 43, 0.74);
    --text-mute: rgba(20, 24, 43, 0.55);
    --text-on-accent: #FFFFFF;
    --shadow-md: 0 14px 34px -16px rgba(20, 24, 43, 0.28);
    --shadow-lg: 0 34px 70px -26px rgba(20, 24, 43, 0.35);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    min-height: 100vh;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--magenta); color: #fff; }

/* Scrollbar discrète */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--violet); }

/* ---- Utilitaires layout ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-2); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* Typo helpers */
.display { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.02em; }
.gradient-text {
    background: var(--grad-signal);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.eyebrow {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--fs-eyebrow); font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-mute);
}
.eyebrow::before {
    content: ''; width: 26px; height: 2px; border-radius: 2px;
    background: var(--grad-signal);
}
.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 300;
    background: var(--magenta); color: #fff; padding: 12px 20px;
    border-radius: 0 0 10px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
[hidden] { display: none !important; }