/* ============================================================ DESIGN SYSTEM v6 — THÈME « Luxe » ============================================================ Identité noir et or, discrète et posée : ombres à peine perceptibles, transitions lentes, typographie Didone dramatique pour les titres. Activé par . Voir theme-solaire.css pour le mode d'emploi complet. ============================================================ */ /* ============================================================ 0. PRIMITIVES DE MARQUE ============================================================ */ :root { /* Encre — neutres chauds très sombres / crème très clairs. 975 : cran extrême pour le fond « sunken » du mode sombre. */ --base-luxe-ink-0: #fffdf8; --base-luxe-ink-50: #faf7ef; --base-luxe-ink-100: #f2ecdc; --base-luxe-ink-200: #e2d8c0; --base-luxe-ink-300: #c9bb98; --base-luxe-ink-400: #a3936c; --base-luxe-ink-500: #7a6d51; --base-luxe-ink-600: #564d3a; --base-luxe-ink-700: #3a3327; --base-luxe-ink-800: #211d16; --base-luxe-ink-900: #14110c; --base-luxe-ink-950: #0a0805; --base-luxe-ink-975: #060504; /* Or — couleur d'action / marque */ --base-luxe-gold-50: #fdfbf3; --base-luxe-gold-100: #faf3dc; --base-luxe-gold-200: #f3e4ad; --base-luxe-gold-300: #e8cf74; --base-luxe-gold-400: #d4af37; --base-luxe-gold-500: #b8942a; --base-luxe-gold-600: #96751f; --base-luxe-gold-700: #77591a; --base-luxe-gold-800: #5c4515; --base-luxe-gold-900: #3d2e0e; --base-luxe-gradient: linear-gradient(135deg, var(--base-luxe-gold-300), var(--base-luxe-gold-600)); --base-luxe-mesh: radial-gradient(at 20% 80%, var(--base-luxe-gold-200) 0, transparent 55%), radial-gradient(at 80% 20%, var(--base-luxe-ink-200) 0, transparent 55%), radial-gradient(at 50% 50%, var(--base-luxe-gold-100) 0, transparent 70%); /* Piles d'élévation discrètes — primitives brutes, consommées par la famille 4 ci-dessous. */ /* Seule la teinte bascule — light-dark() ne prend que des couleurs, jamais une pile d'ombres. Les rayons du mode sombre, qui dépassaient de 2 à 4px ceux du mode clair, sont alignés sur ces derniers : à ces opacités (0,3-0,45 contre 0,06-0,1), c'est l'opacité qui porte la différence, pas l'étalement. */ --base-luxe-tint-1: light-dark(hsl(38 40% 20%/0.06), hsl(0 0% 0%/0.3)); --base-luxe-tint-2: light-dark(hsl(38 40% 20%/0.06), hsl(0 0% 0%/0.35)); --base-luxe-tint-3: light-dark(hsl(38 40% 20%/0.08), hsl(0 0% 0%/0.35)); --base-luxe-tint-4: light-dark(hsl(38 40% 20%/0.1), hsl(0 0% 0%/0.45)); --base-luxe-elev-low: 0 1px 2px var(--base-luxe-tint-1); --base-luxe-elev-mid: 0 1px 2px var(--base-luxe-tint-1), 0 2px 8px var(--base-luxe-tint-2); --base-luxe-elev-high: 0 1px 2px var(--base-luxe-tint-3), 0 6px 20px var(--base-luxe-tint-4); } /* ============================================================ 1. COULEURS — Thème « Luxe » Le texte sur l'action principale reste sombre (encre), pas blanc : un bouton or avec du texte blanc perd son éclat. ============================================================ */ [data-theme-style="luxe"] { --surface-base: light-dark(var(--base-luxe-ink-50), var(--base-luxe-ink-950)); --surface-raised: light-dark(var(--base-luxe-ink-0), var(--base-luxe-ink-900)); --surface-sunken: light-dark(var(--base-luxe-ink-100), var(--base-luxe-ink-975)); --surface-overlay: light-dark(color-mix(in srgb, var(--base-luxe-ink-0) 90%, transparent), color-mix(in srgb, var(--base-luxe-ink-950) 92%, transparent)); --surface-glass: light-dark(color-mix(in srgb, var(--base-luxe-ink-0) 70%, transparent), color-mix(in srgb, var(--base-luxe-ink-950) 70%, transparent)); --surface-inverse: light-dark(var(--base-luxe-ink-900), var(--base-luxe-ink-100)); --text: light-dark(var(--base-luxe-ink-900), var(--base-luxe-ink-50)); --text-secondary: light-dark(var(--base-luxe-ink-600), var(--base-luxe-ink-300)); --text-tertiary: light-dark(var(--base-luxe-ink-500), var(--base-luxe-ink-400)); --text-inverse: light-dark(var(--base-luxe-ink-50), var(--base-luxe-ink-900)); /* Encre la plus profonde plutôt que 900 : l'or foncé de l'état actif (--action-primary-active) passe ainsi de 4,4:1 à 4,6:1. */ --text-on-action: var(--base-luxe-ink-950); --text-link: light-dark(var(--base-luxe-gold-700), var(--base-luxe-gold-400)); --text-link-hover: light-dark(var(--base-luxe-gold-800), var(--base-luxe-gold-300)); --text-code: light-dark(var(--base-luxe-gold-700), var(--base-luxe-gold-400)); --text-code-accent: light-dark(var(--base-luxe-ink-600), var(--base-luxe-ink-300)); --text-marker: var(--base-luxe-gold-400); --border: light-dark(var(--base-luxe-ink-200), var(--base-luxe-ink-800)); --border-muted: light-dark(var(--base-luxe-ink-100), color-mix(in srgb, var(--base-luxe-gold-100) 6%, transparent)); --border-strong: light-dark(var(--base-luxe-ink-300), var(--base-luxe-ink-700)); --border-field: var(--base-luxe-ink-500); /* L'or clair de --action-primary ne se détache pas du crème (1,96:1) : un liseré or foncé donne au bouton une limite visible (4:1). */ --border-action: var(--base-luxe-gold-600); --border-focus: light-dark(var(--base-luxe-gold-600), var(--base-luxe-gold-400)); --border-accent: var(--base-luxe-gold-400); --action-primary: var(--base-luxe-gold-400); --action-primary-hover: light-dark(var(--base-luxe-gold-500), var(--base-luxe-gold-300)); --action-primary-active: light-dark(var(--base-luxe-gold-600), var(--base-luxe-gold-500)); --action-secondary: light-dark(var(--base-luxe-ink-100), var(--base-luxe-ink-800)); --action-secondary-hover: light-dark(var(--base-luxe-ink-200), var(--base-luxe-ink-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-luxe-gold-100), color-mix(in srgb, var(--base-luxe-gold-400) 15%, transparent)); --status-primary-foreground: light-dark(var(--base-luxe-gold-800), var(--base-luxe-gold-300)); --status-primary-border: transparent; --selection-background: light-dark(var(--base-luxe-gold-200), var(--base-luxe-gold-800)); --selection-foreground: light-dark(var(--base-luxe-ink-900), var(--base-luxe-gold-100)); --brand-gradient: var(--base-luxe-gradient); --brand-mesh: var(--base-luxe-mesh); --scrollbar-track: light-dark(var(--base-luxe-ink-100), var(--base-luxe-ink-900)); --scrollbar-thumb: light-dark(var(--base-luxe-ink-300), var(--base-luxe-ink-700)); --scrollbar-thumb-hover: light-dark(var(--base-luxe-ink-400), var(--base-luxe-ink-600)); } /* ============================================================ 2. ESPACES — Thème « Luxe » Très aéré : le silence visuel fait partie de l'élégance. ============================================================ */ [data-theme-style="luxe"] { --space-inline-gap: var(--base-space-3); --space-stack-gap: var(--base-space-6); --space-group-gap: var(--base-space-10); --space-section-gap: var(--base-space-32); --space-page-padding: var(--base-space-8); --space-card-padding: var(--base-space-10); --space-dialog-padding: var(--base-space-12); --space-fieldset-padding: var(--base-space-8); --space-demo-padding: var(--base-space-8); --space-button-padding-x: var(--base-space-8); --space-button-padding-y: var(--base-space-3); --space-button-padding-x-sm: var(--base-space-5); --space-button-padding-y-sm: var(--base-space-2); --space-button-padding-x-lg: var(--base-space-10); --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-16); } /* ============================================================ 3. LAYOUT PRINCIPAL — Thème « Luxe » Conteneur étroit façon revue imprimée, coins nets à peine adoucis (pas de pilule, ce serait trop informel). ============================================================ */ [data-theme-style="luxe"] { --layout-content-width: var(--base-width-lg); --layout-content-narrow: var(--base-width-sm); --layout-header-min-height: var(--base-space-20); --layout-radius-card: var(--base-radius-sm); --layout-radius-button: var(--base-radius-none); --layout-radius-button-sm: var(--base-radius-none); --layout-radius-button-lg: var(--base-radius-sm); --layout-radius-input: var(--base-radius-none); --layout-radius-dialog: var(--base-radius-md); --layout-radius-badge: var(--base-radius-none); --layout-radius-tag: var(--base-radius-none); --layout-avatar-size: var(--base-space-10); --layout-avatar-size-sm: var(--base-space-8); --layout-avatar-size-lg: var(--base-space-16); } /* ============================================================ 4. OMBRES — Thème « Luxe » Discrètes, presque invisibles : l'élévation se joue dans l'espace et la bordure, pas dans l'ombre portée. ============================================================ */ [data-theme-style="luxe"] { --shadow-elev-low: var(--base-luxe-elev-low); --shadow-elev-mid: var(--base-luxe-elev-mid); --shadow-elev-high: var(--base-luxe-elev-high); --shadow-focus-ring: 0 0 0 3px light-dark( color-mix(in srgb, var(--base-luxe-gold-400) 25%, transparent), color-mix(in srgb, var(--base-luxe-gold-400) 30%, transparent)); } [data-theme-style="luxe"] { --shadow-button: none; --shadow-button-hover: var(--shadow-elev-low); --shadow-card-elevated: var(--shadow-elev-low); --shadow-card-interactive: none; --shadow-card-interactive-hover: var(--shadow-elev-mid); --shadow-glow-accent: 0 0 30px color-mix(in srgb, var(--base-luxe-gold-400) 25%, transparent); --shadow-gradient-card: var(--shadow-elev-low); --shadow-gradient-card-hover: var(--shadow-elev-mid); } /* ============================================================ 5. ANIMATIONS — Thème « Luxe » Lentes et linéaires : la précipitation n'est pas élégante. ============================================================ */ [data-theme-style="luxe"] { --motion-fast: var(--base-duration-slow) var(--base-ease); --motion-normal: var(--base-duration-slower) var(--base-ease); --motion-slow: 800ms var(--base-ease-out); --motion-spring: var(--base-duration-slower) var(--base-ease-out); --motion-float-distance: 6px; --motion-float-duration: 6s; --motion-glow-duration: 3s; --motion-gradient-duration: 12s; --motion-shimmer-duration: 2.5s; } /* ============================================================ 6. TYPOGRAPHIE — Thème « Luxe » Titres Didone dramatiques (Didot/Bodoni), corps Transitional classique, interface Classical Humanist sobre. ============================================================ */ [data-theme-style="luxe"] { --font-heading: var(--base-font-didone); --font-body: var(--base-font-transitional); --font-ui: var(--base-font-classical); --font-code: var(--base-font-mono-slab); --weight-display: var(--base-weight-regular); --weight-heading: var(--base-weight-regular); --weight-body: var(--base-weight-regular); --weight-strong: var(--base-weight-semi); --weight-ui: var(--base-weight-medium); --leading-heading: var(--base-leading-snug); --leading-body: var(--base-leading-relaxed); --leading-paragraph: var(--base-leading-loose); --tracking-display: var(--base-tracking-normal); --tracking-heading: var(--base-tracking-wide); --tracking-ui: var(--base-tracking-widest); }