/* ============================================================ DESIGN SYSTEM v6 — THÈME « foret » ============================================================ Généré par theme-builder.html le 2026-07-09. Couche de SURCHARGE, chargée après tokens.css + components.css. N’est active que si . Toute famille non redéfinie ci-dessous retombe sur « Moderne ». Charte : couleurs littérales uniquement en section 0 ; les sections 1-6 ne référencent que des primitives via var() ; translucides via color-mix(in srgb, var(--primitive) N%, transparent). ============================================================ */ /* ============================================================ 0. PRIMITIVES DE MARQUE — propres à ce thème ============================================================ */ :root { /* Neutres — générés depuis #0a7850 (mode « teinte ») */ --base-foret-neutral-50: #f7fbf9; --base-foret-neutral-100: #eef4f1; --base-foret-neutral-200: #dee5e1; --base-foret-neutral-300: #c6ceca; --base-foret-neutral-400: #a1aaa5; --base-foret-neutral-500: #808884; --base-foret-neutral-600: #606864; --base-foret-neutral-700: #484f4b; --base-foret-neutral-800: #313935; --base-foret-neutral-900: #202622; --base-foret-neutral-950: #0f1411; --base-foret-neutral-975: #080c0a; /* Marque — générée depuis #0a7850 */ --base-foret-brand-50: #eef8f2; --base-foret-brand-100: #daf0e4; --base-foret-brand-200: #bce2cd; --base-foret-brand-300: #8ecaab; --base-foret-brand-400: #5caf87; --base-foret-brand-500: #36946a; --base-foret-brand-600: #1c7b55; --base-foret-brand-700: #146846; --base-foret-brand-800: #135539; --base-foret-brand-900: #15452f; /* Accent (2e voix du dégradé) — #047186 */ --base-foret-accent-50: #eef7fa; --base-foret-accent-100: #daeef3; --base-foret-accent-200: #bbdfe9; --base-foret-accent-300: #8cc5d5; --base-foret-accent-400: #5aa8bc; --base-foret-accent-500: #338da3; --base-foret-accent-600: #197589; --base-foret-accent-700: #116274; --base-foret-accent-800: #11505e; --base-foret-accent-900: #14414c; /* Dégradé de marque et fond d’ambiance */ --base-foret-gradient: linear-gradient(135deg, var(--base-foret-brand-400), var(--base-foret-accent-500)); --base-foret-mesh: radial-gradient(at 20% 80%, var(--base-foret-brand-200) 0, transparent 50%), radial-gradient(at 80% 20%, var(--base-foret-accent-200) 0, transparent 50%), radial-gradient(at 50% 50%, var(--base-foret-neutral-200) 0, transparent 70%); /* Piles d’élévation teintées à la marque (teinte 158°) — primitives brutes, consommées par la famille 4 ci-dessous. */ /* Géométrie commune aux deux modes, seule la teinte bascule : light-dark() ne prend que des couleurs, pas une pile d'ombres. */ --base-foret-tint-1: light-dark(hsl(158 45% 25%/0.12), hsl(158 60% 3%/0.4)); --base-foret-tint-2: light-dark(hsl(158 45% 25%/0.14), hsl(158 60% 3%/0.45)); --base-foret-tint-3: light-dark(hsl(158 45% 25%/0.18), hsl(158 60% 3%/0.5)); --base-foret-tint-4: light-dark(hsl(158 45% 25%/0.22), hsl(158 60% 3%/0.65)); --base-foret-elev-low: 0.5px 1px 1.4px var(--base-foret-tint-1), 0.8px 1.6px 2px var(--base-foret-tint-1); --base-foret-elev-mid: 0.5px 1px 1.4px var(--base-foret-tint-2), 1.6px 3.2px 4px var(--base-foret-tint-2), 4px 8px 10px var(--base-foret-tint-2); --base-foret-elev-high: 0.5px 1px 1.4px var(--base-foret-tint-1), 3px 6px 7.4px var(--base-foret-tint-3), 10px 20px 25px var(--base-foret-tint-4); } /* ============================================================ 1. COULEURS — Thème « foret » Les statuts (succès/alerte/danger/info) restent universels. ============================================================ */ [data-theme-style="foret"] { --surface-base: light-dark(var(--base-foret-neutral-50), var(--base-foret-neutral-950)); --surface-raised: light-dark(var(--base-neutral-0), var(--base-foret-neutral-900)); --surface-sunken: light-dark(var(--base-foret-neutral-100), var(--base-foret-neutral-975)); --surface-overlay: light-dark(color-mix(in srgb, var(--base-neutral-0) 88%, transparent), color-mix(in srgb, var(--base-foret-neutral-950) 90%, transparent)); --surface-glass: light-dark(color-mix(in srgb, var(--base-neutral-0) 65%, transparent), color-mix(in srgb, var(--base-foret-neutral-950) 65%, transparent)); --surface-inverse: light-dark(var(--base-foret-neutral-900), var(--base-foret-neutral-100)); --text: light-dark(var(--base-foret-neutral-900), var(--base-foret-neutral-50)); --text-secondary: light-dark(var(--base-foret-neutral-700), var(--base-foret-neutral-300)); --text-tertiary: light-dark(var(--base-foret-neutral-600), var(--base-foret-neutral-400)); --text-inverse: light-dark(var(--base-foret-neutral-50), var(--base-foret-neutral-900)); /* Vert profond : le texte clair y est lisible (5,3:1) là où le quasi-noir plafonne à 3,8:1. Le mode sombre, dont l'action est un vert clair, garde le texte sombre. */ --text-on-action: light-dark(var(--base-foret-neutral-50), var(--base-foret-neutral-975)); --text-link: light-dark(var(--base-foret-brand-600), var(--base-foret-brand-400)); --text-link-hover: light-dark(var(--base-foret-brand-700), var(--base-foret-brand-300)); --text-code: light-dark(var(--base-foret-brand-600), var(--base-foret-brand-300)); --text-code-accent: light-dark(var(--base-foret-accent-600), var(--base-foret-accent-400)); --text-marker: var(--base-foret-brand-400); --border: light-dark(var(--base-foret-neutral-200), var(--base-foret-neutral-800)); --border-muted: light-dark(var(--base-foret-neutral-100), color-mix(in srgb, var(--base-foret-neutral-100) 8%, transparent)); --border-strong: light-dark(var(--base-foret-neutral-300), var(--base-foret-neutral-700)); --border-field: light-dark(var(--base-foret-neutral-500), var(--base-foret-neutral-600)); --border-focus: light-dark(var(--base-foret-brand-500), var(--base-foret-brand-400)); --border-accent: var(--base-foret-brand-400); --action-primary: light-dark(var(--base-foret-brand-600), var(--base-foret-brand-500)); --action-primary-hover: light-dark(var(--base-foret-brand-700), var(--base-foret-brand-400)); --action-primary-active: light-dark(var(--base-foret-brand-800), var(--base-foret-brand-300)); --action-secondary: light-dark(var(--base-foret-neutral-100), var(--base-foret-neutral-800)); --action-secondary-hover: light-dark(var(--base-foret-neutral-200), var(--base-foret-neutral-700)); --action-danger: light-dark(var(--base-error-600), var(--base-error-500)); --action-danger-hover: light-dark(var(--base-error-700), var(--base-error-400)); --status-primary-background: light-dark(var(--base-foret-brand-100), color-mix(in srgb, var(--base-foret-brand-500) 15%, transparent)); --status-primary-foreground: light-dark(var(--base-foret-brand-700), var(--base-foret-brand-300)); --status-primary-border: transparent; --selection-background: light-dark(var(--base-foret-brand-200), var(--base-foret-brand-800)); --selection-foreground: light-dark(var(--base-foret-brand-900), var(--base-foret-brand-100)); --brand-gradient: var(--base-foret-gradient); --brand-mesh: var(--base-foret-mesh); --scrollbar-track: light-dark(var(--base-foret-neutral-100), var(--base-foret-neutral-900)); --scrollbar-thumb: light-dark(var(--base-foret-neutral-300), var(--base-foret-neutral-700)); --scrollbar-thumb-hover: light-dark(var(--base-foret-neutral-400), var(--base-foret-neutral-600)); } /* ============================================================ 2. ESPACES — Thème « foret » ============================================================ */ [data-theme-style="foret"] { --space-inline-gap: var(--base-space-2\.5); --space-stack-gap: var(--base-space-5); --space-group-gap: var(--base-space-8); --space-section-gap: var(--base-space-24); --space-page-padding: var(--base-space-8); --space-card-padding: var(--base-space-8); --space-dialog-padding: var(--base-space-10); --space-fieldset-padding: var(--base-space-8); --space-demo-padding: var(--base-space-8); --space-button-padding-x: var(--base-space-7); --space-button-padding-y: var(--base-space-3); --space-button-padding-x-sm: var(--base-space-4); --space-button-padding-y-sm: var(--base-space-2); --space-button-padding-x-lg: var(--base-space-8); --space-button-padding-y-lg: var(--base-space-4); --space-input-padding-x: var(--base-space-4); --space-input-padding-y: var(--base-space-3); --space-badge-padding-x: var(--base-space-3); --space-badge-padding-y: var(--base-space-1); --space-heading-gap-lg: var(--base-space-8); --space-heading-gap-sm: var(--base-space-4); --space-heading-top-gap: var(--base-space-12); } /* ============================================================ 3. LAYOUT PRINCIPAL — Thème « foret » ============================================================ */ [data-theme-style="foret"] { --layout-content-width: var(--base-width-2xl); --layout-content-narrow: var(--base-width-lg); --layout-radius-card: var(--base-radius-2xl); --layout-radius-button: var(--base-radius-xl); --layout-radius-button-sm: var(--base-radius-lg); --layout-radius-button-lg: var(--base-radius-2xl); --layout-radius-input: var(--base-radius-xl); --layout-radius-dialog: var(--base-radius-3xl); } /* ============================================================ 4. OMBRES — Thème « foret » Halo de focus et lueurs accordés à la marque + piles teintées. ============================================================ */ [data-theme-style="foret"] { --shadow-elev-low: var(--base-foret-elev-low); --shadow-elev-mid: var(--base-foret-elev-mid); --shadow-elev-high: var(--base-foret-elev-high); --shadow-focus-ring: 0 0 0 3px light-dark( color-mix(in srgb, var(--base-foret-brand-500) 18%, transparent), color-mix(in srgb, var(--base-foret-brand-400) 25%, transparent)); } [data-theme-style="foret"] { --shadow-button: var(--shadow-elev-low); --shadow-button-hover: var(--shadow-elev-mid); --shadow-card-elevated: var(--shadow-elev-mid); --shadow-card-interactive: var(--shadow-elev-low); --shadow-card-interactive-hover: var(--shadow-elev-high); --shadow-gradient-card: var(--shadow-elev-mid); --shadow-gradient-card-hover: var(--shadow-elev-high); --shadow-glow-accent: 0 0 20px color-mix(in srgb, var(--base-foret-brand-500) 40%, transparent), 0 0 40px color-mix(in srgb, var(--base-foret-brand-500) 15%, transparent); --shadow-pulse-dim: 0 0 6px color-mix(in srgb, var(--base-foret-brand-500) 15%, transparent); --shadow-pulse-bright: 0 0 34px color-mix(in srgb, var(--base-foret-brand-500) 90%, transparent); } /* ============================================================ 5. ANIMATIONS — Thème « foret » ============================================================ */ /* Famille héritée de « Moderne » (tokens.css) — rien à redéfinir. */ /* ============================================================ 6. TYPOGRAPHIE — Thème « foret » ============================================================ */ [data-theme-style="foret"] { --font-heading: var(--base-font-geo-humanist); --font-body: var(--base-font-humanist); --font-ui: var(--base-font-neo-grotesque); --font-code: var(--base-font-mono-code); --weight-display: var(--base-weight-semi); --weight-heading: var(--base-weight-medium); --weight-body: var(--base-weight-regular); --weight-strong: var(--base-weight-semi); --weight-ui: var(--base-weight-medium); --leading-heading: var(--base-leading-tight); --leading-body: var(--base-leading-normal); --leading-paragraph: var(--base-leading-relaxed); --tracking-display: var(--base-tracking-normal); --tracking-heading: var(--base-tracking-normal); --tracking-ui: var(--base-tracking-wide); }