/* =========================================================================
   Com'On — Design tokens
   Palette extraite de la bannière de marque (claude/ComO.png).
   Approche mobile first : les valeurs par défaut sont celles du téléphone,
   les media queries `min-width` viennent ensuite élargir.
   Ne jamais coder une couleur en dur ailleurs : tout passe par ces variables.
   ========================================================================= */

:root {
    /* ---- Couleurs de marque (les 4 points du dégradé du mégaphone) ---- */
    --como-blue: #3730f0;
    --como-violet: #7c2ff0;
    --como-magenta: #e0338e;
    --como-pink: #f0417e;
    --como-orange: #ff8a45;
    --como-amber: #ffa24c;

    /* ---- Encre : le bleu nuit du logo "Com'On" ---- */
    --como-ink-900: #080a2b;
    --como-ink-800: #0e1140;
    --como-ink-700: #1a1f5c;
    --como-ink-600: #2b3178;

    /* ---- Dégradé signature ----
       Le geste graphique de la marque. Réservé aux éléments porteurs :
       titres accentués, CTA principal, filets, états actifs.
       Jamais sur de grandes surfaces ni sur du texte courant. */
    --como-gradient: linear-gradient(100deg,
        var(--como-blue) 0%,
        var(--como-violet) 28%,
        var(--como-magenta) 62%,
        var(--como-orange) 100%);
    --como-gradient-soft: linear-gradient(100deg,
        color-mix(in srgb, var(--como-blue) 12%, transparent) 0%,
        color-mix(in srgb, var(--como-violet) 12%, transparent) 28%,
        color-mix(in srgb, var(--como-magenta) 12%, transparent) 62%,
        color-mix(in srgb, var(--como-orange) 12%, transparent) 100%);
    --como-gradient-line: linear-gradient(90deg,
        var(--como-blue), var(--como-violet), var(--como-magenta), var(--como-orange));

    /* ---- Neutres (teintés bleu nuit, jamais du gris pur) ---- */
    --como-n-0: #ffffff;
    --como-n-25: #fafbff;
    --como-n-50: #f4f5fb;
    --como-n-100: #e9ebf5;
    --como-n-200: #d7daea;
    --como-n-300: #b6bbd3;
    --como-n-400: #8d93b3;
    --como-n-500: #6b7194;
    --como-n-600: #4d5375;
    --como-n-700: #343a5c;
    --como-n-800: #1f2447;
    --como-n-900: #0e1140;

    /* ---- Sémantique ---- */
    --como-success: #0f8f5c;
    --como-success-bg: #e4f7ef;
    --como-warning: #b56a0a;
    --como-warning-bg: #fbf0dd;
    --como-danger: #c92b3c;
    --como-danger-bg: #fbe6e9;
    --como-info: var(--como-violet);
    --como-info-bg: #f1ebfe;

    /* ---- Rôles d'interface (light) ---- */
    --bg: var(--como-n-25);
    --bg-elevated: var(--como-n-0);
    --bg-sunken: var(--como-n-50);
    --surface: var(--como-n-0);
    --surface-hover: var(--como-n-50);
    --border: var(--como-n-200);
    --border-soft: var(--como-n-100);
    --border-strong: var(--como-n-300);
    --text: var(--como-ink-800);
    --text-muted: var(--como-n-500);
    --text-subtle: var(--como-n-400);
    --text-inverse: var(--como-n-0);
    --accent: var(--como-violet);
    --accent-contrast: #ffffff;
    --focus-ring: color-mix(in srgb, var(--como-violet) 45%, transparent);

    /* ---- Couleurs des réseaux (pastilles, graphiques, filtres) ---- */
    --net-facebook: #1877f2;
    --net-instagram: #d62976;
    --net-linkedin: #0a66c2;
    --net-x: #0f1419;
    --net-tiktok: #ff0050;
    --net-youtube: #ff0000;
    --net-pinterest: #bd081c;
    --net-threads: #101010;
    --net-bluesky: #1185fe;
    --net-mastodon: #6364ff;
    --net-google_business: #4285f4;

    /* ---- Typographie ----
       --font-brand   : géométrique arrondie, très proche du lettrage du logo.
                        Logo, titres de section, titres de carte.
       --font-sans    : texte courant, interface, formulaires.
       --font-display : grotesque condensée en capitales, reprise de la bannière.
                        Réservée aux pages marketing.
       Polices à auto-héberger dans public/fonts — jamais via un CDN. */
    --font-brand: "Comfortaa", "Quicksand", "Poppins", "Trebuchet MS", system-ui, sans-serif;
    --font-sans: "Afacad Flux", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Archivo Black", "Anton", "Oswald", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

    /* Échelle fluide : la même variable vaut sur téléphone et sur grand écran,
       aucune redéclaration de taille de police dans les media queries. */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.0625rem;
    --text-xl: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    --text-2xl: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);
    --text-3xl: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);
    --text-4xl: clamp(2rem, 1.4rem + 3vw, 3rem);
    --text-5xl: clamp(2.5rem, 1.6rem + 4.5vw, 4rem);

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.6;

    --tracking-display: -0.02em;
    --tracking-wide: 0.18em; /* "COMMUNICATION DIGITALE" du logo */

    /* ---- Espacement (échelle de 4) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* Gouttière de page : serrée sur téléphone, large sur desktop. */
    --gutter: var(--space-4);

    /* ---- Rayons (le logo est très arrondi : on assume) ---- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    /* ---- Ombres (teintées encre, jamais noir pur) ---- */
    --shadow-xs: 0 1px 2px rgb(14 17 64 / 0.06);
    --shadow-sm: 0 2px 8px rgb(14 17 64 / 0.07);
    --shadow-md: 0 8px 24px rgb(14 17 64 / 0.09);
    --shadow-lg: 0 20px 48px rgb(14 17 64 / 0.14);
    --shadow-glow: 0 8px 28px color-mix(in srgb, var(--como-magenta) 32%, transparent);

    /* ---- Mouvement ---- */
    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-fast: 120ms;
    --dur: 220ms;
    --dur-slow: 400ms;

    /* ---- Gabarit ----
       --sidebar-w vaut 0 sur téléphone : la navigation est en bas de l'écran.
       Elle passe en rail d'icônes sur tablette, puis en colonne complète. */
    --container: 1240px;
    --header-h: 60px;
    --sidebar-w: 0px;
    --bottom-nav-h: calc(62px + env(safe-area-inset-bottom, 0px));

    /* Cible tactile minimale recommandée (WCAG 2.2 / Apple HIG). */
    --tap: 44px;

    /* Sur fond bleu nuit (navigation, bannière d'accueil), le dégradé de marque
       manque de contraste : l'orange de la palette prend le relais. */
    --on-dark-accent: var(--como-orange);
    --on-dark-text: #f2f3fc;
    --on-dark-muted: #9aa1cb;
    --on-dark-surface: rgb(255 255 255 / 0.06);
    --on-dark-border: rgb(255 255 255 / 0.12);
}

@media (min-width: 48em) {   /* 768px — tablette */
    :root {
        --gutter: var(--space-5);
        --header-h: 64px;
        --sidebar-w: 84px;
        --bottom-nav-h: 0px;
    }
}

@media (min-width: 75em) {   /* 1200px — desktop */
    :root {
        --gutter: var(--space-6);
        --header-h: 68px;
        --sidebar-w: 258px;
    }
}

/* ---- Thème sombre : fond bleu nuit de la marque, jamais noir ----
   Les jetons sont redéfinis en trois temps pour couvrir les trois états du
   lecteur : préférence système, choix explicite clair, choix explicite sombre. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #070a24;
        --bg-elevated: #111539;
        --bg-sunken: #0c1030;
        --surface: #111539;
        --surface-hover: #191e4c;
        --border: #272d5e;
        --border-soft: #1e2450;
        --border-strong: #363d75;
        --text: #eef0fb;
        --text-muted: #a4aacd;
        --text-subtle: #7178a0;
        --text-inverse: #070a24;
        --accent: #a172ff;
        --focus-ring: color-mix(in srgb, #a172ff 55%, transparent);

        --como-success: #3ed596;
        --como-success-bg: #0e3628;
        --como-warning: #f0ad4e;
        --como-warning-bg: #3a2a10;
        --como-danger: #ff7183;
        --como-danger-bg: #3d1620;
        --como-info: #a172ff;
        --como-info-bg: #241a4d;

        --net-x: #e7e9ea;
        --net-threads: #f0f0f0;

        --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
        --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.35);
        --shadow-md: 0 8px 24px rgb(0 0 0 / 0.45);
        --shadow-lg: 0 20px 48px rgb(0 0 0 / 0.6);
    }
}

:root[data-theme="dark"] {
    --bg: #070a24;
    --bg-elevated: #111539;
    --bg-sunken: #0c1030;
    --surface: #111539;
    --surface-hover: #191e4c;
    --border: #272d5e;
    --border-soft: #1e2450;
    --border-strong: #363d75;
    --text: #eef0fb;
    --text-muted: #a4aacd;
    --text-subtle: #7178a0;
    --text-inverse: #070a24;
    --accent: #a172ff;
    --focus-ring: color-mix(in srgb, #a172ff 55%, transparent);

    --como-success: #3ed596;
    --como-success-bg: #0e3628;
    --como-warning: #f0ad4e;
    --como-warning-bg: #3a2a10;
    --como-danger: #ff7183;
    --como-danger-bg: #3d1620;
    --como-info: #a172ff;
    --como-info-bg: #241a4d;

    --net-x: #e7e9ea;
    --net-threads: #f0f0f0;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.35);
    --shadow-md: 0 8px 24px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 20px 48px rgb(0 0 0 / 0.6);
}