/* * tokens.css — CTC · VALEURS PURES (custom properties) * DA_CTC V2 · Nanodot × Fable · 2026-07-12 · palette choisie AU NUANCIER hex par hex * Règle : 0 valeur en dur hors :root et [data-theme="dark"] * Concept : LIGHT = LE TIRAGE (baryté chaud) · DARK = LE NÉGATIF (chambre noire) * Composants et usages (grain · frise · tag · carte diapo) : voir components.css */ /* ── LIGHT · LE TIRAGE (défaut) ── */ :root { /* ── BASE (DA §3) ── */ /* ADDENDUM 4 · V-baryté FINAL 2026-07-12 · réétalonnage thème TIRAGE (plus de gris) */ /* fond = #DAD8D3 (le gris chaud cherché) · surface = #EBE9E4 (+11 pts clair) */ /* monture = #E4E2DC (entre fond et surface, la diapo se détache des deux) */ /* gris-argentique-2 assombri #6E6C68 → #5C5A56 pour AA≥4.5 texte secondaire */ /* thème NÉGATIF (noir-revelateur/gelatine) intouché — cible ADDENDUM 4 §2 */ --noir-revelateur: #121110; --noir-gelatine: #1E1C1A; --blanc-baryte: #DAD8D3; --blanc-rc: #EBE9E4; --gris-argentique-1: #A9A7A2; --gris-argentique-2: #5C5A56; --gris-argentique-3: #403E3B; --rouge-inactinique: #B3202C; /* ── BRANCHES (DA §4) — 9 tokens actés au nuancier ── */ --rouge-boitier: #A61B29; /* Boîtiers & objectifs */ --acajou-rougi: #8B3A2E; /* Chambres & anciens */ --magenta-capteur: #C41E5F; /* Numérique & récent */ --corail-gelatine: #E8604C; /* Éclairage & flash & accessoires */ --jaune-kodak: #F9B916; /* Chimie & papiers */ --ciel-papier: #6CA0D4; /* Notices techniques */ --caca-oie: #8F8A4B; /* Cartes postales & photos anciennes */ --celadon: #2FA89B; /* Livres & revues */ --bleu-wiki: #0E65C0; /* Wiki */ /* ── RÔLES SÉMANTIQUES · mode TIRAGE ── */ --color-bg: var(--blanc-baryte); --color-bg-subtle: var(--blanc-rc); --color-bg-card: var(--blanc-rc); --color-fg: var(--noir-revelateur); --color-fg-subtle: var(--gris-argentique-3); --color-fg-muted: var(--gris-argentique-2); --color-fg-inverse: var(--blanc-baryte); /* ── ACCENT (DA §3) · rouge inactinique SEUL ── */ --color-accent: var(--rouge-inactinique); --color-accent-hover:#8F1A25; --color-accent-fg: var(--blanc-baryte); /* ── MONTURE CARTE DIAPO (DA §6) ── */ /* ADDENDUM 4 · réétalonné avec blanc-baryte · #E4E2DC entre fond et surface */ --monture-diapo: #E4E2DC; --monture-diapo-dark: #3A3630; /* maquette non câblée · Phase 2 style_guide */ /* ── ÉTATS · sobres · zéro couleur de branche ── */ --color-success: #2D7A47; --color-success-bg: #EDFAF2; --color-warning: #8A5C00; --color-warning-bg: #FEF9EC; --color-danger: var(--rouge-inactinique); --color-danger-bg: #FBE9EB; --color-info: var(--gris-argentique-3); --color-info-bg: #F0EEE8; /* ── BORDURES ── */ /* ADDENDUM 4 · sur fond #DAD8D3, un border clair disparaît → passe à gris-argentique-1 */ --color-border: var(--gris-argentique-1); --color-border-focus:var(--rouge-inactinique); /* ── TYPOGRAPHIE ── */ /* Choix Nanodot 2026-07-12 · auto-hébergées OFL · voir fonts.css */ /* ADDENDUM 2 · titrage A/B par langue → html[lang] overrides plus bas */ --font-titrage: 'LT Streak', Georgia, 'Times New Roman', serif; --font-labeur: 'Gontserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Alias hérités (compat layouts M002) */ --font-titre: var(--font-titrage); --font-sans: var(--font-labeur); --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem; --font-size-4xl: 2.5rem; --line-height-base: 1.6; --line-height-tight: 1.2; /* ── ESPACEMENT ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; /* ── RAYONS · sobres · le carré est le glyphe (§1bis) ── */ --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-full: 9999px; /* ── OMBRES · légères (pas de glossy) ── */ --shadow-sm: 0 1px 2px rgba(18,17,16,.08); --shadow-md: 0 4px 12px rgba(18,17,16,.10); --shadow-lg: 0 8px 24px rgba(18,17,16,.14); /* ── TRANSITIONS ── */ --transition-fast: 100ms ease; --transition-base: 200ms ease; --transition-slow: 350ms ease; /* ── MISE EN PAGE ── */ --container-max: 1280px; --sidebar-width: 240px; --header-height: 64px; /* ── GLYPHE CARRÉ (§1bis DA) ── */ --glyphe-xs: 6px; --glyphe-sm: 8px; --glyphe-md: 12px; --glyphe-lg: 16px; /* ── FRISE (composants.css) ── */ /* ADDENDUM 4 · V-grain 0 · effet indiscernable → SUPPRIMÉ en prod */ /* · style_guide garde le panneau démo (0 / 0.04 / 0.07) pour éventuel retour */ /* · DA_CTC §1 à amender au verdict Nanodot (rapport ADDENDUM 4) */ --grain-opacity: 0; --filmstrip-height: 24px; --filmstrip-perf: 6px; /* taille du carré perforation (§1bis) */ --filmstrip-gap: 8px; --filmstrip-bg: var(--noir-revelateur); } /* ── DARK · LE NÉGATIF ── */ [data-theme="dark"] { --color-bg: var(--noir-revelateur); --color-bg-subtle: var(--noir-gelatine); --color-bg-card: var(--noir-gelatine); --color-fg: var(--blanc-baryte); --color-fg-subtle: var(--gris-argentique-1); --color-fg-muted: var(--gris-argentique-2); --color-fg-inverse: var(--noir-revelateur); --color-accent: var(--rouge-inactinique); --color-accent-hover:#D42A38; --color-accent-fg: var(--blanc-baryte); --color-success: #4ADE80; --color-success-bg: #0D2318; --color-warning: #FBBF24; --color-warning-bg: #261D08; --color-danger: var(--rouge-inactinique); --color-danger-bg: #2D0E10; --color-info: var(--gris-argentique-1); --color-info-bg: var(--noir-gelatine); --color-border: #302E2A; --color-border-focus:var(--rouge-inactinique); --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 4px 12px rgba(0,0,0,.45); --shadow-lg: 0 8px 24px rgba(0,0,0,.55); /* Grain plus discret en négatif (double sombre) */ --grain-opacity: 0.03; --filmstrip-bg: var(--blanc-baryte); } /* ── OS PREF DARK · fallback si sans data-theme explicite ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: var(--noir-revelateur); --color-bg-subtle: var(--noir-gelatine); --color-bg-card: var(--noir-gelatine); --color-fg: var(--blanc-baryte); --color-fg-subtle: var(--gris-argentique-1); --color-fg-muted: var(--gris-argentique-2); --color-fg-inverse: var(--noir-revelateur); --color-accent-hover:#D42A38; --color-success: #4ADE80; --color-success-bg: #0D2318; --color-warning: #FBBF24; --color-warning-bg: #261D08; --color-danger-bg: #2D0E10; --color-info: var(--gris-argentique-1); --color-info-bg: var(--noir-gelatine); --color-border: #302E2A; --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 4px 12px rgba(0,0,0,.45); --shadow-lg: 0 8px 24px rgba(0,0,0,.55); --grain-opacity: 0.03; --filmstrip-bg: var(--blanc-baryte); } } /* ADDENDUM 3 · 2026-07-12 · A/B tranché : LT Streak WINNER pour FR + EN */ /* LT Saeada archivée cryogénie · disponible pour style_guide panneau démo */ /* (--font-titrage déjà défini dans :root ci-dessus) */ /* ── RESET MINIMAL ── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background-color: var(--color-bg); color: var(--color-fg); font-family: var(--font-labeur); font-size: var(--font-size-base); line-height: var(--line-height-base); transition: background-color var(--transition-base), color var(--transition-base); }