/* ============================================================ Demeris — tokens du site Base commune tirée du design system Demeris GED (neutres froids, typo Outfit, teal profond). Chaque produit n'apporte que son accent via une classe de thème sur (voir bas de fichier). Sources : design-system/ged/tokens.css et design-system/capture/tokens.css ============================================================ */ :root { /* ---------- Rampe teal (marque) ---------- */ --teal-50: #eef5f5; --teal-100: #d4e6e6; --teal-200: #a7cccd; --teal-300: #7fb3b3; --teal-400: #5f9d9d; --teal-500: #4b8f8f; --teal-600: #3a7a7c; --teal-700: #2a6266; --teal-800: #1e4e52; --teal-900: #163e41; --teal-950: #0f2e30; /* ---------- Neutres froids (base du site) ---------- */ --neutral-50: #f4f7f6; --neutral-100: #e9eeed; --neutral-200: #d6dedd; --neutral-300: #b9c4c3; --neutral-400: #93a09f; --neutral-500: #6f7c7b; --neutral-600: #556160; --neutral-700: #3d4746; --neutral-800: #29312f; --neutral-900: #171d1c; --white: #ffffff; /* ---------- Accent Capture (cyan), utilisé sur les pages Capture ---------- */ --cyan-100: #d2eef0; --cyan-400: #35bec2; --cyan-500: #13a8ad; --cyan-600: #0e8e97; /* ---------- Sémantique ---------- */ --green-500: #3a9e77; --green-600: #2f8f6b; --amber-500: #d59626; --amber-600: #b97e15; --red-500: #cf5a52; --red-600: #b8433c; --blue-500: #3f7fa0; --blue-600: #316784; /* ---------- Rôles de couleur (site) ---------- */ --color-bg: var(--neutral-50); --color-surface: var(--white); --color-surface-inset: var(--neutral-100); --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); --color-text: var(--teal-950); --color-text-body: var(--neutral-700); --color-text-muted: var(--neutral-600); --color-text-invert: var(--white); --color-brand: var(--teal-800); --color-brand-hover: var(--teal-900); --color-brand-active: var(--teal-950); /* Accent par défaut = teal (thème GED / site). Surchargé par .theme-* */ --color-accent: var(--teal-500); --color-accent-strong: var(--teal-600); --color-accent-soft: var(--teal-50); --color-accent-contrast: var(--white); --color-success: var(--green-600); --color-warning: var(--amber-600); --color-danger: var(--red-600); --color-info: var(--blue-600); /* ---------- Typographie (Outfit) ---------- */ --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: var(--font-sans); --font-mono: "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, monospace; --fs-micro: 0.6875rem; /* 11 */ --fs-caption: 0.75rem; /* 12 */ --fs-body-sm: 0.875rem; /* 14 */ --fs-body: 1rem; /* 16 */ --fs-body-lg: 1.125rem; /* 18 */ --fs-h6: 1.25rem; /* 20 */ --fs-h5: 1.5rem; /* 24 */ --fs-h4: 1.875rem; /* 30 */ --fs-h3: 2.375rem; /* 38 */ --fs-h2: 3rem; /* 48 */ --fs-h1: 3.75rem; /* 60 */ --fs-display: 4.75rem; /* 76 */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.1; --lh-heading: 1.2; --lh-body: 1.55; --lh-relaxed: 1.65; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.02em; --ls-caps: 0.09em; /* ---------- Espacement (grille 8px) ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ---------- Rayons ---------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; /* ---------- Élévation (ombres teintées teal) ---------- */ --shadow-xs: 0 1px 2px rgba(15, 48, 51, 0.06); --shadow-sm: 0 1px 3px rgba(15, 48, 51, 0.08), 0 1px 2px rgba(15, 48, 51, 0.04); --shadow-md: 0 4px 12px rgba(15, 48, 51, 0.08), 0 2px 4px rgba(15, 48, 51, 0.05); --shadow-lg: 0 12px 28px rgba(15, 48, 51, 0.12), 0 4px 8px rgba(15, 48, 51, 0.06); --shadow-focus: 0 0 0 3px var(--color-accent-strong); /* ---------- Gabarit ---------- */ --container: 1200px; --container-narrow: 820px; --header-height: 72px; /* ---------- Mouvement ---------- */ --dur-fast: 120ms; --dur-base: 180ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* ---------- Dégradés de marque (accent = selon le thème) ---------- */ --grad-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-strong) 100%); --grad-brand: linear-gradient(150deg, var(--teal-700) 0%, var(--teal-900) 100%); --grad-brand-vivid: linear-gradient(130deg, var(--teal-800) 0%, var(--teal-600) 55%, var(--cyan-600) 118%); --grad-soft: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-surface) 42%); } /* ============================================================ Thèmes par produit — n'affectent que l'accent, jamais la base. À poser sur : class="theme-capture" ou class="theme-ged". ============================================================ */ .theme-ged { --color-accent: var(--teal-500); --color-accent-strong: var(--teal-600); --color-accent-soft: var(--teal-50); --color-accent-contrast: var(--white); --shadow-focus: 0 0 0 3px var(--color-accent-strong); } .theme-capture { --color-accent: var(--cyan-500); --color-accent-strong: var(--cyan-600); --color-accent-soft: var(--cyan-100); --color-accent-contrast: var(--white); --shadow-focus: 0 0 0 3px var(--color-accent-strong); }