/* ============================================================ CLAUSEUR — DESIGN TOKENS ============================================================ ⭐ FICHIER CENTRAL DU DESIGN. Toute couleur, font, taille, ombre, radius : ICI et nulle part ailleurs. Pour changer le thème du site entier : modifier ce fichier. ============================================================ */ :root { /* ===== Palette base ===== */ --color-paper: #FBF7F0; --color-paper-dark: #F2EBDB; --color-paper-card: #FFFEFB; --color-ink: #1A1410; --color-ink-soft: #3D332B; --color-ink-muted: #7A6D5F; --color-ink-border: #E8E0CD; /* ===== Couleurs sémantiques (sévérité) ===== */ --color-danger: #C53030; --color-danger-soft: #FED7D7; --color-danger-bg: #FFF1F1; --color-warning: #D4A04A; --color-warning-soft: #FAEFD4; --color-warning-bg: #FBF1D9; --color-success: #2F5D3F; --color-success-soft: #D4EBD8; --color-success-bg: #ECF5EE; --color-info: #2C7A99; --color-info-soft: #D6ECF5; --color-info-bg: #E8F3F8; /* ===== Rôles d'usage (sémantique d'action) ===== */ --color-action-primary: var(--color-ink); --color-action-primary-text: var(--color-paper); --color-action-primary-hover: var(--color-danger); --color-link: var(--color-danger); --color-highlight: var(--color-warning); --color-bg-app: var(--color-paper); --color-bg-elevated: var(--color-paper-card); --color-text-primary: var(--color-ink); --color-text-secondary: var(--color-ink-soft); --color-text-muted: var(--color-ink-muted); --color-border: var(--color-ink-border); /* ===== Typographie ===== */ --font-serif: 'Fraunces', Georgia, serif; --font-sans: 'Geist', system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; /* ===== Échelles ===== */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; --shadow-card: 2px 2px 0 var(--color-ink-border); --shadow-stamp: 4px 4px 0 var(--color-ink); --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05); --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.08); /* ===== Décoratifs (signature du thème vintage) ===== */ --deco-stamp-rotate: -3deg; --deco-wavy-color: var(--color-warning); --deco-paper-tex: radial-gradient(circle at 20% 30%, rgba(212, 160, 74, 0.04) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(197, 48, 48, 0.03) 0%, transparent 50%); } /* ============================================================ EXEMPLE DE THÈME ALTERNATIF (désactivé) Pour basculer en mode "pop" : ============================================================ [data-theme="pop"] { --color-paper: #FFFCEC; --color-paper-card: #FFFFFF; --color-ink: #161616; --color-action-primary: #FF5A36; --color-action-primary-hover: #FFB800; --color-link: #FF5A36; --color-highlight: #FFD400; --font-serif: 'Space Grotesk', sans-serif; --radius-md: 12px; --radius-lg: 20px; --deco-stamp-rotate: 0deg; --shadow-stamp: 6px 6px 0 #161616; } */