/* Engendré par :web:generateThemeCss — ne pas éditer.
 *
 * La vérité de ces valeurs vit dans `themes/<id>.json`, à la racine du
 * dépôt ; ce fichier est réécrit à chaque construction, donc une
 * correction faite ici disparaît sans laisser de trace. Le pourquoi :
 * `docs/plans/theme/`.
 *
 * ⚠️ Doit être lié AVANT `custom.css` : `:root` et `[data-theme=…]` ont
 * la même spécificité, donc c'est l'ordre qui décide. Gardé par
 * `:web:checkThemeCssIsLinked`. */

/*
 * Phase F.14.3 — extra theme presets, inspired by https://styles.refero.design/.
 * Each preset overrides the same brand + surface tokens; structural CSS rules
 * across custom.css (dropdowns, tabs, cards, calendar, ...) consume the
 * variables and pick up the new look automatically.
 *
 * These are LIGHT-WEIGHT mappings — they don't pull custom fonts, bespoke
 * shadows, or per-component decorations from the source designs. The point is
 * to give Pascal a quick visual sweep across options; we tune the specific
 * theme he picks afterwards.
 */

:root {
    /* Brand palette — deep teal anchors authority; amber accent for KPIs and highlights. */
    --brand-primary: #115e6c;
    --brand-primary-hover: #0d4d59;
    --brand-primary-soft: #d8eaee;  /* tint for selected rows, focus rings */
    --brand-primary-fg: #ffffff;
    --brand-accent: #c98a3f;  /* warm amber */
    --brand-accent-hover: #b1762e;
    --brand-accent-soft: #f4e7d2;
    --brand-accent-fg: #2c1d05;
    --brand-ai: #7c3aed;

    /* Default Light — warm cream rail, distinct from canvas but light */
    --chrome-rail-bg: #f4ead4;
    --chrome-rail-fg: #20272f;
    --chrome-rail-fg-muted: #6f7a87;
    --chrome-rail-hover-bg: #ede0c2;
    --chrome-rail-active-fg: #115e6c;
    --chrome-rail-border: #d4c8a6;
    --chrome-rail-border-soft: #e3dccb;
    /* Gouttière horizontale du corps de page. Nommée parce que c'est un rôle
     * du chrome, pas une valeur d'écran : la changer ici déplace la marge de
     * toutes les pages à la fois. Voir `.chrome-page-host` plus bas.
     */
    --chrome-content-gutter: var(--space-xl);

    /* Surfaces — warm paper rather than clinical white. */
    --surface-bg: #fbf7ef;  /* page bg: very warm off-white */
    --surface-fg: #20272f;
    --surface-muted: #6f7a87;
    --surface-card: #ffffff;
    --surface-card-side: #f6efe1;  /* side rail / footer rows: paper tint */
    --surface-border: #e3dccb;
    --surface-divider: #ece5d3;
    --surface-row-hover: #f1eadb;
    --surface-input-bg: #ffffff;
    --surface-input-disabled-bg: #f6efe1;
    --surface-shadow: 0 1px 3px rgba(20, 25, 35, 0.06), 0 1px 2px rgba(20, 25, 35, 0.04);
    --surface-shadow-lg: 0 4px 16px rgba(20, 25, 35, 0.08), 0 2px 6px rgba(20, 25, 35, 0.05);
    --surface-drop-target: #e8f0fe;

    /* Tones — anchored to brand. Muted is paper-tinted. */
    /* Les variantes `-soft` sont DÉRIVÉES, pas choisies : un ton mélangé à 15 % sur la carte. Six variables au lieu de trente (6 tons × 5 thèmes), et surtout aucune valeur à maintenir — un thème qui change son `-bg` voit sa teinte suivre. Le taux vient d'un précédent du dépôt : `brand-primary` → `brand-primary-soft` est un mélange du même ordre (~16 % sur le rouge, ~13 % sur le vert). */
    /* `#354` — assombri (`#2a7d4f` → `#1f6b42`) à la demande de Didier (« augmente le contraste des verts ») : la pastille « Accepté » était à 4,61 sur son voile, au ras du seuil. */
    --tone-success-bg: #1f6b42;
    --tone-success-fg: #ffffff;
    --tone-danger-bg: #b8404a;
    --tone-danger-fg: #ffffff;
    --tone-warning-bg: #d49025;
    --tone-warning-fg: #2c1d05;
    /* `#354` — un vrai bleu (arbitrage de Didier, 2026-09-11 : « Envoyé bleu »). Il valait `var(--brand-primary)`, le bleu-vert du thème : Envoyé avait la couleur du bouton primaire. `apple` garde sa couleur de marque, qui est déjà un bleu. */
    --tone-info-bg: #2d6cb5;
    --tone-info-fg: #ffffff;
    --tone-muted-bg: #6f7a87;
    --tone-muted-fg: #ffffff;
    /* `#354` — gris, plus beige : le badge « Brouillon » était beige sur beige (`#ece5d3` / `#5b6573`, spec « Look and feel »). */
    --tone-neutral-bg: #e7e9ec;
    --tone-neutral-fg: #5b6573;
    /* `#354` — le vert foncé de la spec (« Accepté vert, Facturé vert foncé ») : la tonalité `DONE`, un succès définitif. */
    --tone-done-bg: #0e4429;
    --tone-done-fg: #ffffff;
    --tone-success-soft: color-mix(in srgb, var(--tone-success-bg) 15%, var(--surface-card));
    /* Le fond « danger doux » qui manquait. Trois sites le fabriquaient chacun de leur côté : `#f8d7da` dans custom.css, `errorContainer` laissé à Material sur Android (#94, L4.5, exempté faute de donnée), et un `error.copy(alpha = 0.10f)` dans `CriticalConfirmationCard`. */
    --tone-danger-soft: color-mix(in srgb, var(--tone-danger-bg) 15%, var(--surface-card));
    --tone-warning-soft: color-mix(in srgb, var(--tone-warning-bg) 15%, var(--surface-card));
    --tone-info-soft: color-mix(in srgb, var(--tone-info-bg) 15%, var(--surface-card));
    --tone-muted-soft: color-mix(in srgb, var(--tone-muted-bg) 15%, var(--surface-card));
    /* `#354` — la seule variante douce dérivée du `-fg` et pas du `-bg` : le neutre est pâle par construction, et 15 % d'un fond pâle sur la carte ne se voit pas — une pastille « Brouillon » sans pastille. 12 % de son encre grise donne un voile gris visible. */
    --tone-neutral-soft: color-mix(in srgb, var(--tone-neutral-fg) 12%, var(--surface-card));
    /* `#354` — 22 % et non 15 % comme les autres voiles : sans cela, « Facturé » et « Accepté » portaient deux voiles vert pâle presque identiques, et seul le texte les séparait. La spec veut deux verts qu'on distingue. */
    --tone-done-soft: color-mix(in srgb, var(--tone-done-bg) 22%, var(--surface-card));

    --chart-series-1: #115e6c;
    --chart-series-2: #e74c3c;
    --chart-series-3: #2ecc71;
    --chart-series-4: #f39c12;
    --chart-series-5: #9b59b6;
    --chart-series-6: #1abc9c;
    --chart-series-7: #e67e22;
    --chart-series-8: #34495e;

    /* Typography */
    /* `#349` — les titres sont en Inter, comme le corps : une seule famille, différenciée par la graisse. Fraunces, serif de titrage à fort contraste, perdait ses déliés à la taille des titres d'écran (24-30 px) — le « A » d'Affaires se lisait « f » sur la démo. */
    --font-base-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-headline-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-numeric-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --font-base: 14px;
    --font-small: 0.875rem;
    --font-label: 0.85rem;
    /* `#353` — l'échelle de la spec « Look and feel » : titre de page 22 px, semi-gras. Le corps et les cellules suivent `--base-font-size` (la densité : 13 px en compact, 14 px en confortable), pas un jeton de plus. */
    --font-title: 22px;
    /* `#353` — le chiffre d'une carte KPI : 24 px, semi-gras, chiffres tabulaires. Il était en `display-6` (40 px), presque le double du titre de la page. */
    --font-kpi: 24px;
    /* `#353` — libellé de KPI et en-tête de colonne : 11 px, en capitales, espacés de `--font-caption-tracking`, couleur `--surface-muted`. Un en-tête avait la taille d'une cellule. */
    --font-caption: 11px;
    --font-caption-tracking: 0.04em;
    /* `#353` — texte secondaire (sous-titre à côté d'un titre) : 12 px, `--surface-muted`. */
    --font-secondary: 12px;

    /* Radius + shadow */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;

    /* Motion */
    --motion-fast: 150ms;
    --motion-standard: 250ms;

    /* Density tokens — wired to ThemeTokens.Density (M.7) via the
     * [data-density="compact" | "comfortable"] attribute on <html>.
     * Compact is the default; the user toggles in the navbar.
     *
     * Every component that wants density awareness reads these vars
     * rather than hardcoding paddings — so flipping density flips the
     * whole UI in one place.
     */
    --row-height: 36px;  /* table row height */
    --cell-padding-y: 6px;  /* table cell vertical padding */
    --cell-padding-x: 10px;  /* table cell horizontal padding */
    --form-row-gap: 0.4rem;  /* vertical gap between form rows */
    --form-col-gap: 0.85rem;  /* horizontal gap inside a row */
    --header-band-h: 44px;  /* page-header band height target */
    --toolbar-band-h: 44px;  /* browse toolbar band height target */
    --action-icon-size: 1.05rem;  /* ghost-icon size in cells */
    --action-icon-padding: 0.25rem;
    --form-control-py: 0.3rem;  /* input padding-y */
    --card-padding: 0.85rem;
    --base-font-size: 13px;
}

[data-theme="dark"] {
    /* Slightly desaturated brand for night reading. Tones brighten to
     * stay legible on dark surfaces.
     */
    --brand-primary: #4ba6b8;
    --brand-primary-hover: #5fb7c8;
    --brand-primary-soft: #1d3a40;
    --brand-accent: #e3a55a;
    --brand-accent-hover: #ecb878;
    --brand-accent-soft: #3a2c14;

    /* Default Dark — graphite teal */
    --chrome-rail-bg: #14282d;
    --chrome-rail-fg: #d8eaee;
    --chrome-rail-fg-muted: rgba(216, 234, 238, 0.55);
    --chrome-rail-hover-bg: rgba(255, 255, 255, 0.06);
    --chrome-rail-active-fg: #4ba6b8;
    --chrome-rail-border: #0a1c20;
    --chrome-rail-border-soft: rgba(255, 255, 255, 0.06);

    --surface-bg: #161a1f;
    --surface-fg: #e6e8eb;
    --surface-muted: #9ba2ad;
    --surface-card: #1d2127;
    --surface-card-side: #1a1e23;
    --surface-border: #303640;
    --surface-divider: #262b32;
    --surface-row-hover: #262d36;
    --surface-input-bg: #1d2127;
    --surface-input-disabled-bg: #1a1e23;
    --surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --surface-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);

    /* ── Tons
     * Registre de ce thème : puce sombre teintée + texte clair teinté —
     * celui que `--tone-muted` utilisait déjà seul (fg/bg 7.76, bg/carte
     * 1.20). Les autres tons s'y alignent au lieu d'inventer un second.
     *
     * ⚠️ `--tone-info-bg` ne peut PAS dériver de `--brand-primary` ici :
     * en sombre la couleur de marque est claire (#4ba6b8, c'est un fond
     * de bouton), et une puce claire à texte blanc y tombe à **2.82:1**.
     * La dérivation est donc rompue dans ce thème, et seulement ici et
     * dans `reworkd`.
     */
    --tone-neutral-bg: #2a2f37;
    --tone-neutral-fg: #c0c5cd;
    --tone-success-bg: #173a29;
    --tone-success-fg: #6fd39b;
    --tone-danger-bg: #43202a;
    --tone-danger-fg: #f79aa4;
    --tone-warning-bg: #3f2f0e;
    --tone-warning-fg: #eab963;
    /* `#354` — un bleu, comme le thème de base (« Envoyé bleu »). Il valait `#12333c` / `#6fcde0`, un bleu-vert. */
    --tone-info-bg: #172a45;
    --tone-info-fg: #86b6f2;
    --tone-muted-bg: #2b323b;
    --tone-muted-fg: #a9b4c1;
    --tone-done-bg: #1d4a33;
    --tone-done-fg: #a4e6c0;

    /* C17 (#577) — la première série suit la couleur de marque du thème : un graphe à une seule série (« Devis émis par mois ») est de la teinte de l'application. Les autres séries gardent la palette qualitative héritée de light. */
    --chart-series-1: #4ba6b8;
}

/* Reworkd — clean data grid on soft sky gradient
 */
[data-theme="reworkd"] {
    --brand-primary: #3e79ea;
    --brand-primary-hover: #3161df;
    --brand-primary-soft: #e7f0ff;
    --brand-primary-fg: #ffffff;
    --brand-accent: #3e9ed0;
    --brand-accent-hover: #2f8cbe;
    --brand-accent-soft: #d6ecf7;
    --brand-accent-fg: #ffffff;

    /* Reworkd — cool sky-tinted light rail */
    --chrome-rail-bg: #d5e3f7;
    --chrome-rail-fg: #1a1f2b;
    --chrome-rail-fg-muted: #6b7280;
    --chrome-rail-hover-bg: #c4d4ed;
    --chrome-rail-active-fg: #3e79ea;
    --chrome-rail-border: #b3c5e3;
    --chrome-rail-border-soft: #c5d4ed;

    /* Reworkd — multi-layered shadows for the soft depth signature. */
    --surface-bg: #eaf2ff;  /* sky tint, more saturated */
    --surface-fg: #1a1f2b;
    --surface-muted: #6b7280;
    --surface-card: #ffffff;
    --surface-card-side: #d8e6fa;
    --surface-border: #c5d4ed;
    --surface-divider: #d8e2f0;
    --surface-row-hover: #dde9fc;
    --surface-input-bg: #ffffff;
    --surface-input-disabled-bg: #f5f9ff;
    --surface-shadow: 0 1px 2px rgba(63, 70, 75, 0.05), 0 2px 4px rgba(63, 70, 75, 0.04);
    --surface-shadow-lg: 0 4px 12px rgba(63, 70, 75, 0.10), 0 12px 28px -12px rgba(63, 70, 75, 0.18);

    /* ── Tons — registre saturé, froid, assorti au ciel du thème
     * ⚠️ `--tone-info-bg` est posé au lieu de dériver de `--brand-primary` :
     * du blanc sur #3e79ea ne rend que **4.10:1**, sous le plancher AA.
     */
    /* ⚠️ `--tone-muted` avait échappé au relevé de #94 : `dark` le surchargeait,
     * donc il comptait comme « thémé » — alors qu'il restait la crème chaude du
     * thème clair dans les TROIS autres. Le critère « thémé quelque part » ne
     * dit rien de « thémé partout ». Ici : teinte ciel, assortie au thème.
     */
    --tone-success-bg: #0b6641;
    --tone-success-fg: #ffffff;
    --tone-danger-bg: #c62333;
    --tone-danger-fg: #ffffff;
    --tone-warning-bg: #9a5b00;
    --tone-warning-fg: #ffffff;
    --tone-info-bg: #2b5fd0;
    --tone-info-fg: #ffffff;
    --tone-muted-bg: #5b6b85;
    --tone-muted-fg: #ffffff;
    --tone-neutral-bg: #dfe7f4;
    --tone-neutral-fg: #4d5a70;
    --tone-done-bg: #063f28;
    --tone-done-fg: #ffffff;

    /* Reworkd — geometric humanist sans (similar to Suisse Intl). */
    --font-base-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
    --font-headline-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

    /* C17 (#577) — la première série suit la couleur de marque du thème : un graphe à une seule série (« Devis émis par mois ») est de la teinte de l'application. Les autres séries gardent la palette qualitative héritée de light. */
    --chart-series-1: #3e79ea;
}

/* Apple — gallery wall at natural light
 */
[data-theme="apple"] {
    --brand-primary: #0071e3;  /* Azure */
    --brand-primary-hover: #0066cc;  /* Cobalt Link */
    --brand-primary-soft: #e6f0fa;
    --brand-primary-fg: #ffffff;
    --brand-accent: #1d1d1f;  /* Ink — used for chips / muted CTAs */
    --brand-accent-hover: #2d2d2f;
    --brand-accent-soft: #f5f5f7;
    --brand-accent-fg: #ffffff;

    /* Apple — clean fog rail, white card, signature minimalism */
    --chrome-rail-bg: #ebebef;
    --chrome-rail-fg: #1d1d1f;
    --chrome-rail-fg-muted: #6e6e73;
    --chrome-rail-hover-bg: #dedee2;
    --chrome-rail-active-fg: #0071e3;
    --chrome-rail-border: #c8c8cd;
    --chrome-rail-border-soft: #d2d2d7;

    --surface-bg: #f5f5f7;  /* Fog */
    --surface-fg: #1d1d1f;  /* Ink */
    --surface-muted: #6e6e73;
    --surface-card: #ffffff;  /* Snow */
    --surface-card-side: #ebebef;
    --surface-border: #d2d2d7;
    --surface-divider: #e8e8ed;
    --surface-row-hover: #e4e4e8;
    --surface-input-bg: #ffffff;
    --surface-input-disabled-bg: #f5f5f7;
    --surface-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
    --surface-shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.08);

    /* ── Tons — palette sémantique système d'Apple
     * ⓘ Le vert système publié (#248a3d) rend **4.40:1** sur blanc, sous
     * le plancher AA ; assombri d'un cran à #217a37 (5.38), le chiffre de
     * son propre `danger`. Ici `--tone-info-bg` continue de dériver de
     * `--brand-primary` (#0071e3, 4.70) — la dérivation tient.
     */
    /* ⚠️ `--tone-muted` avait échappé au relevé de #94 : `dark` le surchargeait,
     * donc il comptait comme « thémé » — alors qu'il restait la crème chaude du
     * thème clair dans les TROIS autres. Le critère « thémé quelque part » ne
     * dit rien de « thémé partout ». Ici : Fog, la neutre maison.
     */
    --tone-success-bg: #1a652d;
    --tone-success-fg: #ffffff;
    --tone-danger-bg: #d70015;
    --tone-danger-fg: #ffffff;
    --tone-warning-bg: #b25000;
    --tone-warning-fg: #ffffff;
    --tone-info-fg: #ffffff;
    --tone-muted-bg: #6e6e73;
    --tone-muted-fg: #ffffff;
    --tone-neutral-bg: #e8e8ed;
    --tone-neutral-fg: #5c5c61;
    --tone-done-bg: #0d4520;
    --tone-done-fg: #ffffff;
    /* `#354` — écrit ici parce que le thème de base ne le dérive plus de la marque : la marque d'`apple` est déjà un bleu (`#0071e3`), et c'est elle qu'Envoyé doit porter. */
    --tone-info-bg: var(--brand-primary);

    /* Apple — native SF on macOS / iOS, Inter elsewhere. Zero load. */
    --font-base-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif;
    --font-headline-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif;

    /* Apple — softer card radii (their signature) + flat panels (no shadows;
     * elevation comes from contrast between surface tones).
     */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;

    /* C17 (#577) — la première série suit la couleur de marque du thème : un graphe à une seule série (« Devis émis par mois ») est de la teinte de l'application. Les autres séries gardent la palette qualitative héritée de light. */
    --chart-series-1: #0071e3;
}

/* Augen Pro — architectural blueprint on white
 */
[data-theme="augen"] {
    --brand-primary: #0f1012;  /* Midnight Ink — primary CTA = strong dark */
    --brand-primary-hover: #2a2c30;
    --brand-primary-soft: #e8e8ec;
    --brand-primary-fg: #fdfdfd;
    --brand-accent: #0071e3;  /* Future Blue — interactive accents */
    --brand-accent-hover: #2384ee;
    --brand-accent-soft: #e6f0fa;
    --brand-accent-fg: #ffffff;

    /* Augen Pro — architectural blueprint, ghost-white rail with stark borders */
    --chrome-rail-bg: #e6e6ea;
    --chrome-rail-fg: #0f1012;
    --chrome-rail-fg-muted: #6f6f73;
    --chrome-rail-hover-bg: #d4d4d8;
    --chrome-rail-active-fg: #0071e3;
    --chrome-rail-border: #b8b8bc;
    --chrome-rail-border-soft: #c8c8cc;

    --surface-bg: #f2f2f4;  /* Ghost White */
    --surface-fg: #0f1012;  /* Midnight Ink */
    --surface-muted: #8f8f8f;
    --surface-card: #fdfdfd;  /* Canvas */
    --surface-card-side: #dcdcdf;
    --surface-border: #c4c4c8;
    --surface-divider: #d8d8dc;
    --surface-row-hover: #d4d4d8;
    --surface-input-bg: #fdfdfd;
    --surface-input-disabled-bg: #f2f2f4;
    --surface-shadow: 0 0 0 1px rgba(15, 16, 18, 0.10);
    --surface-shadow-lg: 0 0 0 1px rgba(15, 16, 18, 0.14);

    /* ── Tons — chroma basse, encre franche, registre architectural
     * `--tone-info-bg` dérive de `--brand-primary` (#0f1012, 18.71) — la
     * dérivation tient, et l'info parle donc de la voix de la marque.
     */
    /* ⚠️ `--tone-muted` avait échappé au relevé de #94 : `dark` le surchargeait,
     * donc il comptait comme « thémé » — alors qu'il restait la crème chaude du
     * thème clair dans les TROIS autres. Le critère « thémé quelque part » ne
     * dit rien de « thémé partout ». Ici : Ghost White assombri d'un cran.
     */
    --tone-success-bg: #185a39;
    --tone-success-fg: #ffffff;
    --tone-danger-bg: #a52334;
    --tone-danger-fg: #ffffff;
    --tone-warning-bg: #8a5a12;
    --tone-warning-fg: #ffffff;
    --tone-info-fg: #fdfdfd;
    --tone-muted-bg: #5a5a5f;
    --tone-muted-fg: #ffffff;
    --tone-neutral-bg: #e4e4e8;
    --tone-neutral-fg: #54545a;
    --tone-done-bg: #0b3a23;
    --tone-done-fg: #ffffff;

    /* Augen Pro — geometric grotesk (similar to PP Neue Montreal). */
    --font-base-family: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
    --font-headline-family: "Space Grotesk", "Inter", system-ui, sans-serif;

    /* Augen Pro — sharp, architectural radii + flat panels (precision). */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;

    /* C17 (#577) — la première série suit la couleur de marque du thème : un graphe à une seule série (« Devis émis par mois ») est de la teinte de l'application. Les autres séries gardent la palette qualitative héritée de light. */
    --chart-series-1: #0f1012;
}