/* ============================================================ DESIGN TOKENS — Magasin virtuel Duvéa Architecture en 3 couches : L1 · Variables canoniques Duvéa (alignées sur duvea.fr) L2 · Extras Loro Piana du magasin (taupe, sable, bois, marbre) L3 · Aliases sémantiques (--color-primary, --color-bg…) Mix actualisé : 70 % neutres / 20 % bleu marine (CTA + nav) / 7 % ocre / 3 % rouge bordeaux. ============================================================ */ :root { /* ============================================================ L1 · Palette canonique Duvéa Identique à duvea.fr. Permet le copier-coller de code entre les deux projets sans réécriture des couleurs. ============================================================ */ --bleu: #0B2545; /* bleu marine profond — CTA, nav, wordmark */ --bleu-cl: #1B3B6F; /* bleu marine clair — hovers, accents */ --rouge: #A8322F; /* rouge français noble — italiques rares */ --rouge-fc: #8B2825; /* rouge foncé — hovers de l'accent */ --ocre: #C89968; /* ocre doré adouci — filets, bordures (décoratif) */ --ocre-fc: #856034; /* ocre foncé — pour textes ocre lisibles sur fond clair (≥ 4.5:1 sur --blanc et --creme). À porter sur duvea.fr lors de la prochaine passe. */ --creme: #F6F0E7; /* crème — fond secondaire */ --blanc: #FFFCF7; /* blanc — fond principal */ --noir: #1A1714; /* noir — texte principal */ --gris: #6B6558; /* gris taupe — texte secondaire */ --gris-cl: #D6CEC2; /* gris clair — séparateurs, bordures */ /* ============================================================ L2 · Extras Loro Piana du magasin Nuances supplémentaires nécessaires aux scènes immersives (parquet, marbre, mobilier, mur). Absentes de duvea.fr. ============================================================ */ --sable: #E5DBC5; /* surfaces tertiaires, mats */ --taupe-cl: #C4B3A0; /* taupe clair, séparations subtiles */ --taupe: #9A8B79; /* taupe principal, texte tertiaire */ --bois-cl: #D4BFA0; /* chêne clair — parquet, portes */ --bois-med: #A88B68; /* chêne moyen — mobilier, cadres */ --marbre: #EFEAE0; /* marbre Carabottino */ --marbre-veine: #B8AC9A; /* veines du marbre */ /* ============================================================ L3 · Aliases sémantiques (à privilégier dans les composants) ============================================================ */ /* Couleurs d'identité */ --color-primary: var(--bleu); --color-primary-hover: var(--bleu-cl); --color-accent: var(--rouge); --color-accent-hover: var(--rouge-fc); --color-gold: var(--ocre); /* décoratif (filets, bordures) */ --color-gold-text: var(--ocre-fc); /* texte ocre lisible (≥ 4.5:1) */ /* Fonds */ --color-bg: var(--blanc); --color-bg-secondary: var(--creme); --color-bg-tertiary: var(--sable); /* Textes — aligné sur duvea.fr (un seul niveau "muted", c'est --gris). La hiérarchie texte muted vs secondary se fait via weight/size/letter- spacing, pas via une teinte plus claire. La taupe `#9A8B79` n'a pas un contraste suffisant (3.23) sur fond --blanc et ne doit donc pas servir pour du texte sur fond clair. */ --color-text: var(--noir); --color-text-secondary: var(--gris); --color-text-muted: var(--gris); --color-text-on-dark: var(--creme); --color-text-link: var(--bleu); /* Bordures */ --color-border: var(--gris-cl); --color-border-strong: var(--taupe); /* ============================================================ Compatibilité ascendante — aliases vers la nouvelle palette pour éviter de réécrire tout le code existant. À résorber au fil des refactos ; les nouveaux composants utilisent L3. ============================================================ */ --bg-primary: var(--color-bg); --bg-secondary: var(--color-bg-secondary); --bg-tertiary: var(--color-bg-tertiary); --text-primary: var(--color-text); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --text-on-dark: var(--color-text-on-dark); --border-subtle: var(--color-border); --border-default: var(--color-border-strong); --accent: var(--color-gold); /* Anciens noms longs (--color-*) — pointent désormais sur la palette signature pour préserver le rendu sans casser le code. */ --color-blanc-pur: var(--blanc); --color-creme: var(--creme); --color-sable: var(--sable); --color-marbre: var(--marbre); --color-marbre-veine: var(--marbre-veine); --color-taupe-cl: var(--taupe-cl); --color-taupe: var(--taupe); --color-brun-doux: var(--gris); --color-noir-doux: var(--noir); --color-bois-cl: var(--bois-cl); --color-bois-med: var(--bois-med); --color-ocre-discret: var(--ocre); --color-gold-discret: var(--ocre); --color-bordeaux-rare: var(--rouge); /* --color-brun-profond était l'ancienne couleur de CTA primaire. Pointe désormais sur --bleu pour que tout code historique bascule automatiquement sur la nouvelle identité Duvéa. */ --color-brun-profond: var(--bleu); /* ============================================================ TYPOGRAPHIES Aligné sur duvea.fr : Fraunces (titres, wordmark) + Manrope (corps + UI). Cormorant Garamond uniquement pour les italiques éditoriaux des fiches produit. ============================================================ */ /* Couches sémantiques */ --font-wordmark: 'Fraunces', Georgia, 'Times New Roman', serif; --font-section-title: 'Fraunces', Georgia, serif; --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-italic-editorial: 'Cormorant Garamond', 'Cormorant', Georgia, serif; /* Aliases historiques — pointent sur les couches ci-dessus */ --font-display: var(--font-italic-editorial); /* italiques éditoriaux */ --font-serif: var(--font-section-title); /* Fraunces */ --font-sans: var(--font-body); /* Manrope */ --font-ui: var(--font-body); /* Manrope */ /* Échelle typographique (modular scale ~1.25) */ --fs-xs: 0.75rem; /* 12 px */ --fs-sm: 0.875rem; /* 14 px */ --fs-base: 1rem; /* 16 px */ --fs-md: 1.125rem; /* 18 px */ --fs-lg: 1.25rem; /* 20 px */ --fs-xl: 1.5rem; /* 24 px */ --fs-2xl: 2rem; /* 32 px */ --fs-3xl: 3rem; /* 48 px */ --fs-4xl: 4rem; /* 64 px */ --fs-5xl: 5.5rem; /* 88 px */ /* Hauteurs de ligne */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --lh-loose: 1.8; /* Letter-spacing */ --tracking-tightest: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.02em; --tracking-wider: 0.06em; --tracking-widest: 0.18em; --tracking-mif: 0.24em; /* "Made in France" du logo, identique duvea.fr */ /* ============================================================ ESPACEMENTS — grille 8 pt ============================================================ */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --space-11: 12rem; /* ============================================================ LAYOUT ============================================================ */ --container-narrow: 720px; --container-default: 1080px; --container-wide: 1440px; --container-full: 1680px; /* Breakpoints (à utiliser en media query) : mobile : 320 – 767 px tablet : 768 – 1439 px desktop : 1440 px et + */ /* ============================================================ BORDURES & ARRONDIS ============================================================ */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; --border-w-hair: 0.5px; --border-w-thin: 1px; --border-w-medium: 2px; /* ============================================================ OMBRES — multi-couches très douces, teinte chaude ============================================================ */ --shadow-xs: 0 1px 2px rgba(26, 23, 20, 0.04); --shadow-sm: 0 1px 3px rgba(26, 23, 20, 0.06), 0 1px 2px rgba(26, 23, 20, 0.04); --shadow-md: 0 4px 8px rgba(26, 23, 20, 0.06), 0 2px 4px rgba(26, 23, 20, 0.04); --shadow-lg: 0 12px 24px rgba(26, 23, 20, 0.08), 0 4px 8px rgba(26, 23, 20, 0.04); --shadow-xl: 0 24px 48px rgba(26, 23, 20, 0.10), 0 8px 16px rgba(26, 23, 20, 0.06); --shadow-glow-warm: 0 0 80px rgba(200, 153, 104, 0.18); --shadow-flag-duvea: drop-shadow(0 1px 2px rgba(11, 37, 69, 0.12)); /* identique duvea.fr */ /* ============================================================ TRANSITIONS — lentes, fluides ============================================================ */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-base: 300ms; --duration-medium: 600ms; --duration-slow: 1000ms; --duration-cinematic: 1500ms; --duration-scene: 3000ms; --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out-soft: cubic-bezier(0.45, 0, 0.55, 1); --ease-cinematic: cubic-bezier(0.65, 0, 0.35, 1); /* ============================================================ Z-INDEX ============================================================ */ --z-base: 0; --z-elevated: 10; --z-sticky: 100; --z-overlay: 1000; --z-drawer: 1100; --z-modal: 1200; --z-toast: 1300; --z-cursor: 9999; /* ============================================================ DIVERS ============================================================ */ --focus-ring: 2px solid var(--color-gold); --focus-ring-offset: 2px; } /* ---------- prefers-reduced-motion : on neutralise les durées ---------- */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-medium: 0ms; --duration-slow: 0ms; --duration-cinematic: 0ms; --duration-scene: 0ms; } }