/* ========================================================================== Design tokens — Agnesa Mirabel -------------------------------------------------------------------------- Toutes les couleurs sont relevées sur ses propres couvertures et sur son feed Instagram, puis ajustées pour passer WCAG AA. Les ratios notés en commentaire ont été calculés, pas estimés. Règle structurante : le DARK est le mode naturel de cette marque (l'histoire se passe la nuit). Le LIGHT est une crème, jamais du blanc pur — le feed d'Agnesa ne contient aucun blanc. ⚠️ L'or #D9AE5F ne fait que 1,75:1 sur crème : il est DÉCORATIF UNIQUEMENT en mode clair. L'or porteur de texte en mode clair est #7A5C2A (5,25:1). ========================================================================== */ :root { /* --- Palette brute, relevée sur les couvertures ------------------------ */ --ink-900: #14243D; /* encre nocturne, le plus profond */ --ink-800: #1B2E4D; /* nuit, surface principale du dark */ --ink-700: #29446D; /* le ciel exact de la couverture du tome 1 */ --ink-600: #3A5680; --gold-500: #D9AE5F; /* l'or du lettrage « THE LUMINOUS TRAIN » */ --gold-400: #E4C180; --gold-300: #FAE19A; /* halo du titre */ --gold-700: #7A5C2A; /* or assombri, seul or lisible sur crème */ --lantern: #FDDF96; /* cœur de la flamme de la lanterne */ --amber: #C0813E; /* ciel ambre du tome 2 */ --amber-300:#F8B358; --cream-50: #F7F2E6; --cream-100:#F2ECDC; --cream-200:#E7E1CE; /* la crème dominante de son feed */ --cream-300:#D6C6AD; --loco-900: #252C27; /* vert wagon */ --loco-600: #3A4A3C; --plum-900: #181329; /* nuit violette des scènes de rêve */ --plum-600: #5F4366; --plum-400: #92648C; /* --- Rayons, ombres, rythme ------------------------------------------- */ --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px; --space-2xs: .25rem; --space-xs: .5rem; --space-sm: .75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem; --measure: 68ch; /* longueur de ligne confortable */ --container: 1180px; --container-narrow: 780px; /* --- Typographie ------------------------------------------------------ */ --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-body: 'Lora', Georgia, 'Times New Roman', serif; /* Échelle fluide : pas de media query, pas de saut brutal. clamp(min, préféré, max) — le préféré est en vw pour suivre le viewport. */ --t-xs: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem); --t-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem); --t-base: clamp(1.02rem, 0.99rem + 0.18vw, 1.14rem); --t-md: clamp(1.16rem, 1.10rem + 0.30vw, 1.34rem); --t-lg: clamp(1.38rem, 1.26rem + 0.60vw, 1.75rem); --t-xl: clamp(1.70rem, 1.45rem + 1.20vw, 2.45rem); --t-2xl: clamp(2.10rem, 1.65rem + 2.10vw, 3.40rem); --t-3xl: clamp(2.55rem, 1.80rem + 3.40vw, 4.60rem); --lh-tight: 1.12; --lh-snug: 1.28; --lh-body: 1.72; --ls-display: -0.015em; --ls-caps: 0.14em; /* ses couvertures espacent beaucoup les capitales */ --ls-title: 0.06em; /* tracking du lettrage « THE LUMINOUS TRAIN » */ /* Grain de papier — son feed n'a aucun aplat. SVG inline en data-URI : ~200 octets, zéro requête réseau, invisible mais on le sent. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); /* --- Easings (courbes fortes, les natives CSS sont trop molles) -------- */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-warm: cubic-bezier(0.34, 0.8, 0.24, 1); /* lent et chaud : la signature du site */ --d-press: 140ms; --d-fast: 180ms; --d-base: 240ms; --d-slow: 380ms; --d-reveal: 720ms; /* révélation d'illustration au scroll, volontairement longue */ } /* ========================================================================== MODE SOMBRE — le mode naturel de cette marque (défaut système) ========================================================================== */ :root, :root[data-theme='dark'] { color-scheme: dark; --bg: var(--ink-900); --surface: var(--ink-800); --surface-2: var(--ink-700); --surface-3: var(--ink-600); --text: var(--cream-100); /* 11.53:1 sur --surface ✓ AAA */ --text-strong: #FFFBF0; --text-muted: #B9C4D6; /* 7.72:1 sur --surface / 5.57:1 sur --surface-2 ✓ */ --accent: var(--gold-500); /* 6.58:1 sur --surface ✓ AA */ --accent-hover: var(--gold-400); /* 7.92:1 ✓ */ --accent-deco: var(--gold-500); --accent-contrast: var(--ink-900); /* texte posé SUR l'or */ --glow: var(--lantern); --glow-soft: rgba(253, 223, 150, .16); --glow-strong: rgba(253, 223, 150, .40); --border: rgba(217, 174, 95, .26); --border-strong: rgba(217, 174, 95, .52); --border-subtle: rgba(242, 236, 220, .10); --shadow-sm: 0 1px 2px rgba(5, 12, 24, .5); --shadow-md: 0 6px 20px -6px rgba(5, 12, 24, .66); --shadow-lg: 0 22px 50px -14px rgba(5, 12, 24, .78); --shadow-glow: 0 0 44px -8px rgba(253, 223, 150, .30); --scrim: linear-gradient(to top, rgba(20, 36, 61, .94) 0%, rgba(20, 36, 61, .58) 46%, rgba(20, 36, 61, .16) 100%); } /* ========================================================================== MODE CLAIR — crème, jamais de blanc pur ========================================================================== */ :root[data-theme='light'] { color-scheme: light; --bg: var(--cream-50); --surface: var(--cream-100); --surface-2: var(--cream-200); --surface-3: var(--cream-300); --text: var(--ink-900); /* 13.20:1 sur --surface ✓ AAA */ --text-strong: #0B1729; --text-muted: #5A6B85; /* 4.59:1 sur --surface ✓ AA */ --accent: var(--gold-700); /* 5.25:1 sur --surface ✓ AA — le SEUL or lisible ici */ --accent-hover: #63491F; --accent-deco: var(--gold-500); /* ⚠️ décoratif uniquement : 1.75:1, jamais de texte */ --accent-contrast: var(--cream-50); --glow: var(--amber); --glow-soft: rgba(192, 129, 62, .12); --glow-strong: rgba(192, 129, 62, .28); --border: rgba(122, 92, 42, .24); --border-strong: rgba(122, 92, 42, .48); --border-subtle: rgba(20, 36, 61, .10); --shadow-sm: 0 1px 2px rgba(90, 70, 40, .10); --shadow-md: 0 6px 20px -6px rgba(90, 70, 40, .18); --shadow-lg: 0 22px 50px -14px rgba(90, 70, 40, .24); --shadow-glow: 0 0 44px -10px rgba(192, 129, 62, .26); --scrim: linear-gradient(to top, rgba(247, 242, 230, .95) 0%, rgba(247, 242, 230, .62) 46%, rgba(247, 242, 230, .14) 100%); } /* Si l'utilisateur n'a rien choisi, on suit la préférence système. `[data-theme]` (posé par le toggle) l'emporte toujours sur ce bloc, dans les deux sens — c'est ce qui rend le toggle réellement maître. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: var(--cream-50); --surface: var(--cream-100); --surface-2: var(--cream-200); --surface-3: var(--cream-300); --text: var(--ink-900); --text-strong: #0B1729; --text-muted: #5A6B85; --accent: var(--gold-700); --accent-hover: #63491F; --accent-deco: var(--gold-500); --accent-contrast: var(--cream-50); --glow: var(--amber); --glow-soft: rgba(192, 129, 62, .12); --glow-strong: rgba(192, 129, 62, .28); --border: rgba(122, 92, 42, .24); --border-strong: rgba(122, 92, 42, .48); --border-subtle: rgba(20, 36, 61, .10); --shadow-sm: 0 1px 2px rgba(90, 70, 40, .10); --shadow-md: 0 6px 20px -6px rgba(90, 70, 40, .18); --shadow-lg: 0 22px 50px -14px rgba(90, 70, 40, .24); --shadow-glow: 0 0 44px -10px rgba(192, 129, 62, .26); --scrim: linear-gradient(to top, rgba(247, 242, 230, .95) 0%, rgba(247, 242, 230, .62) 46%, rgba(247, 242, 230, .14) 100%); } }