/* ========================================================================== VISUAL DIALOGSCRIPT — Design tokens Source unique de vérité. Aucune couleur/valeur hex en dur ailleurs. Identité "dev tool premium" : slate sombre, bleu électrique, cyan, mono code. (Les NOMS de variables sont conserves depuis le substrat — seules les VALEURS changent — pour que base/components/layouts se re-skinnent automatiquement.) ========================================================================== */ :root { /* ── Couleurs de base ─────────────────────────────────────────────── */ --color-ink: #0d1117; /* slate quasi-noir — textes, fond dark (GitHub-like) */ --color-paper: #f4f6fb; /* blanc bleute tech — fond principal light */ --color-paper-pure: #ffffff; /* blanc pur — cartes */ --color-bronze: #2563eb; /* BLEU ELECTRIQUE — accent principal VDS */ --color-bronze-deep: #1d4ed8; /* bleu profond — survol accent */ --color-olive: #1e293b; /* slate profond — surfaces sombres */ --color-olive-soft: #475569; /* slate clair — texte secondaire */ --color-sand: #e2e8f0; /* gris bleute — séparations douces */ --color-lapis: #0ea5e9; /* CYAN — accent info / "nouveau" / liens éditoriaux */ --color-oxide: #f43f5e; /* rose-rouge vif — promos / alerte chaude */ /* ── Sémantique ──────────────────────────────────────────────────── */ --color-bg: var(--color-paper); --color-bg-elevated: var(--color-paper-pure); --color-fg: var(--color-ink); --color-muted: #5b6675; --color-border: #d3dbe8; --color-accent: var(--color-bronze); --color-accent-fg: #ffffff; /* ── États ───────────────────────────────────────────────────────── */ --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; --color-info: var(--color-lapis); --color-promo: var(--color-oxide); --color-urgent: var(--color-oxide); --focus-ring-secondary: var(--color-lapis); /* ── Typographies ────────────────────────────────────────────────── */ /* Display : grotesque caracterielle. Body : grotesk propre. Mono : code VDS (central). */ --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif; --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.9375rem; /* 15px */ --fs-base: 1.0625rem; /* 17px — confort lecture */ --fs-md: 1.25rem; /* 20px */ --fs-lg: 1.75rem; /* 28px */ --fs-xl: 2.5rem; /* 40px */ --fs-2xl: 3.5rem; /* 56px */ --fs-3xl: clamp(3.5rem, 5vw + 1rem, 6rem); /* héros éditorial */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-base: 1.55; --lh-loose: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* ── Spacing — échelle 8px stricte ───────────────────────────────── */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; /* ── Grille / conteneurs ─────────────────────────────────────────── */ --container: 1240px; --container-narrow: 780px; --gutter: var(--s-5); /* ── Rayons ──────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 9999px; /* ── Ombres ──────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(13, 17, 23, .08); --shadow-md: 0 6px 24px rgba(13, 17, 23, .10); --shadow-lg: 0 24px 60px rgba(13, 17, 23, .16); /* ── Transitions ─────────────────────────────────────────────────── */ --ease-out: cubic-bezier(.2, .7, .3, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 320ms; /* ── Z-index ─────────────────────────────────────────────────────── */ --z-base: 0; --z-sticky: 50; --z-dropdown: 100; --z-modal: 500; --z-toast: 700; --z-agegate: 900; /* ── Gradients éditoriaux ────────────────────────────────────────── */ /* Cool : cyan → slate — dominante hero home + fiches produit. */ --gradient-hero-cool: linear-gradient(135deg, var(--color-lapis) 0%, var(--color-ink) 100%); /* Warm (réinterprété tech) : bleu → cyan — éditorial, accents produits. */ --gradient-hero-warm: linear-gradient(135deg, var(--color-bronze) 0%, var(--color-lapis) 100%); /* Soft : blanc bleute → gris — zones de respiration. */ --gradient-surface-soft: linear-gradient(180deg, var(--color-paper) 0%, var(--color-sand) 100%); /* Gradient text — slate → bleu, lisible sur fond clair. */ --gradient-text-display: linear-gradient(180deg, var(--color-ink) 0%, var(--color-bronze) 100%); --gradient-text-display-on-dark: linear-gradient(180deg, #ffffff 0%, var(--color-lapis) 100%); /* Voile d'image hero. */ --gradient-hero-veil: linear-gradient(180deg, rgba(13, 17, 23, .25) 0%, rgba(13, 17, 23, .72) 100%); /* ── Ombres cinématiques ─────────────────────────────────────────── */ --shadow-cinematic: 0 1px 2px rgba(13, 17, 23, .06), 0 8px 24px rgba(13, 17, 23, .09), 0 40px 80px -20px rgba(13, 17, 23, .14); /* ── Texture (grille fine type éditeur, très subtile) ─────────────── */ --texture-paper: url("data:image/svg+xml;utf8,"); } /* Dark mode auto — slate profond, bleu/cyan saturés, glow electrique */ @media (prefers-color-scheme: dark) { :root { --color-bg: #0d1117; /* slate quasi-noir */ --color-bg-elevated: #161b22; /* surface elevee */ --color-fg: #e6edf3; --color-muted: #9aa5b1; --color-border: #2a313c; --color-sand: #21262d; /* Accents plus lumineux en dark pour ressortir sur le slate. */ --color-bronze: #4f8cff; /* bleu electrique lumineux */ --color-bronze-deep: #2f6bdf; --color-lapis: #38bdf8; /* cyan lumineux */ --color-accent-fg: #ffffff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 0 8px rgba(79, 140, 255, .05); --shadow-md: 0 6px 24px rgba(0, 0, 0, .5), 0 0 24px rgba(79, 140, 255, .07); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(79, 140, 255, .08); --gradient-surface-soft: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-elevated) 100%); --gradient-text-display: linear-gradient(180deg, var(--color-fg) 0%, var(--color-bronze) 100%); --gradient-text-display-on-dark: linear-gradient(180deg, #ffffff 0%, var(--color-lapis) 100%); --gradient-hero-veil: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .78) 100%); --shadow-cinematic: 0 1px 2px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .65), 0 0 80px -10px rgba(79, 140, 255, .14); } }