/* tokens.css — palette indigo/teal, neutres chauds, typo raffinée */

:root {
    /* Radii (progressifs, 2xl pour les dialogues) */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Spacing basé sur 4px */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Typographie */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "SF Pro Text",
        "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
    --font-num-features: "tnum", "ss01";

    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 15px;
    --fs-lg: 17px;
    --fs-xl: 20px;
    --fs-2xl: 26px;
    --fs-3xl: 34px;
    --fs-display: 48px;

    /* Tokens pour les textes des charts — en px écran FINAUX.
       Les charts utilisent viewBox + width="100%", donc le scale SVG
       multiplie le font-size CSS. On neutralise ce scale via la variable
       --chart-font-scale (posée en JS par attachChartFontScale) :
         font-size: calc(12px * var(--chart-font-scale, 1));
       Ainsi 12 / 13 px correspondent à la taille réellement affichée
       quelle que soit la largeur du chart et le DPR.

       ATTENTION : en mobile les paddings internes du SVG (en unités
       viewBox, codés dans charts.js) deviennent rétrécis à l'écran.
       Un token trop grand fait déborder les labels côté gauche/droite
       du chart. On prévoit des tailles réduites en mobile ci-dessous. */
    --chart-fs-axis:       12px;
    --chart-fs-label:      13px;
    --chart-fs-annotation: 12px;

    /* Easings & durées */
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
    --ease-out-quart: cubic-bezier(.2, .8, .2, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 240ms;

    /* ===== Breakpoints ===== Single source of truth pour la responsivité.

       LIMITATION CSS : on NE PEUT PAS écrire `@media (max-width: var(--bp-mobile))`
       — les variables CSS ne sont pas évaluables dans les conditions @media.
       Ces tokens servent donc à deux usages :

       1. **Documentation canonique** : tout fichier CSS qui a besoin d'un
          breakpoint DOIT utiliser une de ces valeurs (ne pas inventer 590,
          770, etc.). Vérifié à l'œil sur les @media existantes — 1 seul cas
          spécial à 720px (cf. dashboard.css, layouts hero/compare-row qui
          craquent légèrement avant 768).

       2. **Lecture côté JS** via `getComputedStyle` : `isMobileViewport()`
          de dom.js lit `--bp-mobile` pour rester aligné automatiquement si
          on change la valeur ici un jour, sans devoir patcher 6 endroits.

       Convention : les paires `*-up` (mobile-up = mobile + 1px) servent aux
       `@media (min-width: …)` complémentaires des `(max-width: …)` côté
       mobile-first ; ça évite l'overlap sur la valeur exacte du breakpoint. */
    --bp-mobile:     600px;   /* mobile portrait (smartphone) */
    --bp-mobile-up:  601px;   /* tablet portrait+ — complémentaire de bp-mobile */
    --bp-tablet:     768px;   /* tablet portrait (iPad mini) */
    --bp-tablet-up:  769px;   /* desktop+ — complémentaire de bp-tablet */
    --bp-desktop-lg: 1440px;  /* desktop large (Full HD+) */
}

/* Mobile : tokens chart réduits. Raison technique : sur mobile le SVG
   est rendu dans ~360 px CSS alors que son viewBox = 720, scale ≈ 2.
   Un `font-size: 13px` écran occupe donc ~26 unités viewBox — assez
   large pour déborder des paddings internes (l=44, r=20). On passe
   à 10-11 px écran en mobile, ce qui ramène les labels dans leur piste. */
@media (max-width: 768px) {
    :root {
        --chart-fs-axis:       10px;
        --chart-fs-label:      11px;
        --chart-fs-annotation: 10px;
    }
}

/* ===== Light (défaut) ===== */
:root,
[data-theme="light"] {
    /* Brand indigo profond + accent teal */
    --brand-50:  #eef2ff;
    --brand-100: #e0e7ff;
    --brand-500: #4338ca;
    --brand-600: #3730a3;
    --brand-700: #312e81;

    --accent-50:  #ccfbf1;
    --accent-500: #0d9488;
    --accent-600: #0f766e;

    --success-50:  #dcfce7;
    --success-500: #16a34a;
    --success-600: #15803d;

    --warn-50:  #fef3c7;
    --warn-500: #d97706;
    --warn-600: #b45309;

    --danger-50:  #fee2e2;
    --danger-500: #dc2626;
    --danger-600: #b91c1c;

    /* Bleu-violet flashy pour la courbe "solde projeté" — indigo saturé
       qui tire vers le violet. Volontairement proche de la teinte brand
       (cohérence thème) mais plus électrique pour pop sur les barres
       colorées du stackedBars. */
    --chart-balance: #4f46e5;

    /* Neutres chauds (stone) */
    --bg:           #fafaf9;
    --bg-elevated:  #ffffff;
    --bg-muted:     #f5f5f4;
    --bg-hover:     #e7e5e4;

    --border:        #e7e5e4;
    --border-strong: #d6d3d1;

    --text:        #1c1917;
    --text-muted:  #57534e;
    --text-subtle: #78716c;

    /* Aliases sémantiques (compat avec l'existant) */
    --accent: var(--brand-500);
    --accent-hover: var(--brand-600);
    --accent-contrast: #ffffff;
    --success: var(--success-500);
    --warning: var(--warn-500);
    --danger: var(--danger-500);
    --pointed-bg: var(--success-50);
    --pending-bg: var(--warn-50);

    /* Shadows (inspirées stone) */
    --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04), 0 1px 1px rgba(28, 25, 23, 0.03);
    --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.06), 0 2px 4px rgba(28, 25, 23, 0.04);
    --shadow-lg: 0 12px 32px rgba(28, 25, 23, 0.10), 0 4px 12px rgba(28, 25, 23, 0.06);

    /* Backdrop pour modales */
    --backdrop: rgba(28, 25, 23, 0.55);
}

/* ===== Dark — neutres warm-grey, jamais noir pur ===== */
[data-theme="dark"] {
    --brand-50:  #2a2858;       /* indigo-discreet sur fond sombre */
    --brand-100: #3730a3;
    --brand-500: #a5b4fc;       /* indigo clair lisible */
    --brand-600: #c7d2fe;
    --brand-700: #e0e7ff;

    --accent-50:  #1d4d49;
    --accent-500: #5eead4;
    --accent-600: #99f6e4;

    --success-50:  #1f4d2e;
    --success-500: #4ade80;
    --success-600: #86efac;

    --warn-50:  #6b370d;
    --warn-500: #fbbf24;
    --warn-600: #fcd34d;

    --danger-50:  #6e1f1f;
    --danger-500: #f87171;
    --danger-600: #fca5a5;

    /* Indigo clair lisible — version dark. Identique à --brand-500 dark,
       la valeur originale du premier passage du jaune au bleu. Contraste
       franc sur fond anthracite et par-dessus les barres. */
    --chart-balance: #a5b4fc;

    /* Fonds gris doux avec très légère teinte chaude (pas de noir pur) */
    --bg:           #1d1c22;     /* page — anthracite chaud */
    --bg-elevated:  #292830;     /* cards */
    --bg-muted:     #34333d;     /* hover row, inputs, fond muted */
    --bg-hover:     #43424d;

    --border:        #3a3942;
    --border-strong: #4f4e58;

    --text:        #f5f5f0;     /* off-white chaud */
    --text-muted:  #c4c2bf;
    --text-subtle: #8e8c89;

    --accent: var(--brand-500);
    --accent-hover: var(--brand-600);
    --accent-contrast: #1d1c22;
    --success: var(--success-500);
    --warning: var(--warn-500);
    --danger: var(--danger-500);
    --pointed-bg: rgba(74, 222, 128, 0.10);
    --pending-bg: rgba(251, 191, 36, 0.10);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

    --backdrop: rgba(15, 14, 18, 0.7);
}

/* Système : fallback quand aucun thème explicite n'est posé */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --brand-50:  #2a2858;
        --brand-100: #3730a3;
        --brand-500: #a5b4fc;
        --brand-600: #c7d2fe;
        --accent-50:  #1d4d49;
        --accent-500: #5eead4;
        --success-50:  #1f4d2e;
        --success-500: #4ade80;
        --warn-50:  #6b370d;
        --warn-500: #fbbf24;
        --danger-50:  #6e1f1f;
        --danger-500: #f87171;

        --chart-balance: #a5b4fc;

        --bg:          #1d1c22;
        --bg-elevated: #292830;
        --bg-muted:    #34333d;
        --bg-hover:    #43424d;
        --border:        #3a3942;
        --border-strong: #4f4e58;
        --text:        #f5f5f0;
        --text-muted:  #c4c2bf;
        --text-subtle: #8e8c89;

        --accent: var(--brand-500);
        --accent-hover: var(--brand-600);
        --accent-contrast: #1d1c22;
        --success: var(--success-500);
        --warning: var(--warn-500);
        --danger: var(--danger-500);
        --pointed-bg: rgba(74, 222, 128, 0.10);
        --pending-bg: rgba(251, 191, 36, 0.10);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
        --backdrop: rgba(15, 14, 18, 0.7);
    }
}

/* Reduced motion : neutralise les anims longues */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}