/* 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). */
    --tone-success-bg: #2a7d4f;
    --tone-success-fg: #ffffff;
    --tone-danger-bg: #b8404a;
    --tone-danger-fg: #ffffff;
    --tone-warning-bg: #d49025;
    --tone-warning-fg: #2c1d05;
    --tone-info-bg: var(--brand-primary);
    --tone-info-fg: #ffffff;
    --tone-muted-bg: #6f7a87;
    --tone-muted-fg: #ffffff;
    --tone-neutral-bg: #ece5d3;
    --tone-neutral-fg: #5b6573;
    --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));
    --tone-neutral-soft: color-mix(in srgb, var(--tone-neutral-bg) 15%, var(--surface-card));

    --chart-series-1: #3498db;
    --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;

    /* 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;
    --tone-info-bg: #12333c;
    --tone-info-fg: #6fcde0;
    --tone-muted-bg: #2b323b;
    --tone-muted-fg: #a9b4c1;
}

/* 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: #0f7a4f;
    --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;

    /* 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;
}

/* 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: #217a37;
    --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;

    /* 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;
}

/* 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: #1f6b45;
    --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;

    /* 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;
}