/* ============================================================
   assets/css/tokens.css
   Système de tokens — couleurs, dégradés, transparences,
   typographie, espacements, rayons, ombres.
   Thème clair (par défaut) et sombre via [data-theme="dark"].
   ============================================================ */

:root {
    /* --- Couleurs de marque Orange ------------------------- */
    --c-brand:        #ff7900;   /* Orange digital 1 */
    --c-brand-2:      #f16e00;   /* Orange accessible (texte/hover) */

    /* --- Couleurs fonctionnelles (statuts KPI) ------------- */
    --c-success:      #198c51;
    --c-success-bg:   rgba(25, 140, 81, .12);
    --c-warning:      #fc0;
    --c-warning-text: #8f7200;
    --c-warning-bg:   rgba(255, 204, 0, .16);
    --c-danger:       #cd3c14;
    --c-danger-bg:    rgba(205, 60, 20, .12);
    --c-info:         #237eca;
    --c-info-bg:      rgba(35, 126, 202, .12);

    /* --- Dégradé d'accent (boutons, hero, signature) -------- */
    --grad-accent: linear-gradient(135deg, var(--c-brand) 0%, #ffb066 100%);

    /* --- Typographie ---------------------------------------- */
    --font-base: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

    /* --- Échelle d'espacement -------------------------------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* --- Rayons / ombres -------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .08);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .12);

    /* --- Transition douce pour le changement de thème -------- */
    --transition-theme: background-color .25s ease, color .25s ease,
                         border-color .25s ease, box-shadow .25s ease;
}

/* ================================================================
   THÈME CLAIR (par défaut)
   ================================================================ */
:root,
[data-theme="light"] {
    --bg-grad-start: #fbfbfb;
    --bg-grad-end:   #eef0f2;
    /* léger halo orange en haut de page, très diffus */
    --bg-accent-glow: rgba(255, 121, 0, .07);

    --surface:        rgba(255, 255, 255, .55);
    --surface-strong: rgba(255, 255, 255, .85);
    --surface-solid:  #ffffff;

    --border:       rgba(20, 20, 20, .08);
    --border-strong: rgba(20, 20, 20, .14);

    --text:       #1a1a1a;
    --text-muted: #666666;
    --text-soft:  #8f8f8f;

    --overlay: rgba(20, 20, 20, .04);
}

/* ================================================================
   THÈME SOMBRE
   ================================================================ */
[data-theme="dark"] {
    --bg-grad-start: #1b1b1b;
    --bg-grad-end:   #0a0a0a;
    --bg-accent-glow: rgba(255, 121, 0, .10);

    --surface:        rgba(255, 255, 255, .055);
    --surface-strong: rgba(40, 40, 40, .9);
    --surface-solid:  #1f1f1f;

    --border:        rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .16);

    --text:       #f5f5f5;
    --text-muted: #b3b3b3;
    --text-soft:  #808080;

    --overlay: rgba(255, 255, 255, .05);

    /* Ombres plus discrètes sur fond sombre */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);
}