/* ========================================================================== Killzen Universe — Design tokens (charte v1) -------------------------------------------------------------------------- Même méthode que la charte Pixanté, appliquée à une identité SOMBRE. 3 couches : 1. Primitives → valeurs brutes (ne pas utiliser directement) 2. Sémantique → rôles (fond, texte, accent…) — à utiliser dans le CSS 3. Composants → boutons, cartes, champs Règle d'or : tout accent posé sur le fond du site (#050505) doit tenir AU MOINS 4.5:1 en texte courant, 3:1 en grand titre. Les ratios sont mesurés, pas estimés — ils figurent en commentaire à côté de chaque valeur. ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. PRIMITIVES Chaque pôle a un accent CLAIR (le principal, sur fond sombre) et un accent APPUYÉ (survols, bordures, dégradés fins). ------------------------------------------------------------------------ */ /* Fonds */ --kz-black: #050505; /* fond du site */ --kz-black-soft: #0a0a0c; /* panneaux opaques */ /* Neutres — ratios sur --kz-black */ --kz-white: #ffffff; /* 20.4:1 */ --kz-zinc-100: #e4e4e7; /* 16.1:1 — texte courant */ --kz-zinc-400: #a1a1aa; /* 7.9:1 — texte atténué */ --kz-zinc-500: #8a8a93; /* 6.0:1 — mentions (remplace #71717a, qui tombait à 4.2:1) */ /* Accents par pôle */ --kz-sky-400: #38bdf8; /* 9.5:1 — Studio */ --kz-sky-600: #0284c7; /* 5.0:1 */ --kz-pink-400: #ff49d2; /* 6.9:1 — RMX */ --kz-pink-600: #ff006a; /* 5.3:1 */ --kz-yellow-400: #facc15; /* 13.3:1 — NCM */ --kz-yellow-600: #ca8a04; /* 6.9:1 */ --kz-purple-400: #c084fc; /* 7.7:1 — Underground */ --kz-purple-600: #a758ee; /* 5.1:1 — était #9333ea (3.8:1, trop juste) */ --kz-wine-400: #dd4355; /* 4.9:1 — Records ; était #6a131d (1.67:1, illisible) */ --kz-wine-600: #d65975; /* 5.4:1 — était #8C233B (2.35:1) */ --kz-green-400: #34d399; /* 10.6:1 — Issa G. */ --kz-green-600: #10b981; /* 8.0:1 — était #1e40af (2.34:1) */ /* États */ --kz-success: #34d399; /* 10.6:1 */ --kz-warning: #facc15; /* 13.3:1 */ --kz-danger: #f87171; /* 7.3:1 */ /* ------------------------------------------------------------------------ 2. SÉMANTIQUE ------------------------------------------------------------------------ */ --color-bg: var(--kz-black); --color-surface: rgba(255, 255, 255, 0.02); --color-surface-hover: rgba(255, 255, 255, 0.04); --color-border: rgba(255, 255, 255, 0.08); --color-border-strong: rgba(255, 255, 255, 0.22); /* contour des champs — requis WCAG 1.4.11 */ --color-heading: var(--kz-white); --color-text: var(--kz-zinc-100); --color-text-muted: var(--kz-zinc-400); --color-text-faint: var(--kz-zinc-500); /* le plus clair admis en petit texte */ --color-focus-ring: var(--kz-white); /* ------------------------------------------------------------------------ TYPOGRAPHIE — échelle fluide, ratio ≈ 1.25 ------------------------------------------------------------------------ */ --font-heading: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --text-xs: 0.8125rem; /* 13 px — mentions */ --text-sm: 0.875rem; /* 14 px */ --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* 16 → 18 px */ --text-lg: clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem); /* 18 → 20 px */ --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20 → 24 px — h4 */ --text-2xl: clamp(1.5rem, 1.33rem + 0.8vw, 1.875rem); /* 24 → 30 px — h3 */ --text-3xl: clamp(1.875rem, 1.6rem + 1.3vw, 2.5rem); /* 30 → 40 px — h2 */ --text-4xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem); /* 36 → 56 px — h1 */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-body: 1.6; --tracking-tight: -0.02em; --tracking-wide: 0.08em; /* surtitres en capitales */ --measure: 68ch; /* longueur de ligne max */ /* ------------------------------------------------------------------------ ESPACEMENTS (base 4 px) ------------------------------------------------------------------------ */ --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; --section-y: clamp(var(--space-12), 8vw, var(--space-24)); --gutter: clamp(var(--space-4), 4vw, var(--space-8)); --container-max: 80rem; /* 1280 px — max-w-7xl du site */ --container-narrow: 48rem; /* 768 px — mentions, politique */ /* ------------------------------------------------------------------------ FORMES & PROFONDEUR Pas de néon : sur fond noir, la profondeur vient du contour, pas du halo. ------------------------------------------------------------------------ */ --radius-sm: 6px; --radius-md: 12px; /* boutons, champs */ --radius-lg: 16px; /* cartes */ --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.45), 0 16px 48px rgba(0, 0, 0, 0.45); --border-width: 1px; --focus-ring-width: 3px; --focus-ring-offset: 2px; --icon-sm: 1.125rem; --icon-md: 1.5rem; --icon-lg: 2rem; /* ------------------------------------------------------------------------ MOUVEMENT ------------------------------------------------------------------------ */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ------------------------------------------------------------------------ 3. COMPOSANTS ------------------------------------------------------------------------ */ /* ATTENTION : --primary-color n'existe PAS sur :root, il est pose par les classes .theme-* plus bas dans l'arbre. Un token qui le referencerait ici serait invalide (fond transparent). Les valeurs dependantes du pole se lisent donc directement avec var(--primary-color) dans la regle. */ --btn-primary-text: var(--kz-black); --btn-secondary-border: var(--color-border-strong); --btn-secondary-text: var(--kz-white); --btn-radius: var(--radius-full); --btn-padding-y: 0.75rem; --btn-padding-x: 1.5rem; --btn-min-height: 44px; /* cible tactile accessible */ --btn-weight: var(--font-weight-semibold); --card-bg: var(--color-surface); --card-border: var(--color-border); --card-radius: var(--radius-lg); --card-padding: clamp(var(--space-5), 3vw, var(--space-8)); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-md); } /* ========================================================================== ACCENTS PAR PÔLE Chaque pôle ne redéfinit que ses deux accents : tout le reste est commun. --ambient-light sert aux ombres colorées, jamais à un halo de texte. ========================================================================== */ .theme-universe { --primary-color: var(--kz-white); --secondary-color: var(--kz-zinc-400); --ambient-light: rgba(255, 255, 255, 0.07); } .theme-studio { --primary-color: var(--kz-sky-400); --secondary-color: var(--kz-sky-600); --ambient-light: rgba(56, 189, 248, 0.10); } .theme-rmx { --primary-color: var(--kz-pink-400); --secondary-color: var(--kz-pink-600); --ambient-light: rgba(255, 73, 210, 0.10); } .theme-ncm { --primary-color: var(--kz-yellow-400); --secondary-color: var(--kz-yellow-600);--ambient-light: rgba(250, 204, 21, 0.10); } .theme-underground { --primary-color: var(--kz-purple-400); --secondary-color: var(--kz-purple-600);--ambient-light: rgba(192, 132, 252, 0.10); } .theme-records { --primary-color: var(--kz-wine-400); --secondary-color: var(--kz-wine-600); --ambient-light: rgba(221, 67, 85, 0.10); } .theme-issag { --primary-color: var(--kz-green-400); --secondary-color: var(--kz-green-600); --ambient-light: rgba(52, 211, 153, 0.09); } /* ========================================================================== GRIS INSUFFISANTS text-gray-500 (#71717a) et text-gray-600 (#52525b) de Tailwind tombent à 4.2:1 et 2.6:1 sur notre fond. On les relève sans toucher au HTML. ========================================================================== */ /* Tailwind est injecte par son script APRES nos feuilles : a specificite egale il l'emporterait. On prefixe par body (0,1,1) plutot que d'ecrire !important. */ body .text-gray-500 { color: var(--color-text-faint); } /* 6.0:1 au lieu de 4.2:1 */ body .text-gray-600 { color: var(--color-text-faint); } /* 6.0:1 au lieu de 2.6:1 */