/* ========================================================================== CORNER — Design tokens (v1) -------------------------------------------------------------------------- Source unique de toutes les valeurs visuelles. Aucune couleur brute ne doit exister ailleurs : un composant ou un écran consomme uniquement des tokens SÉMANTIQUES (--background, --primary, --space-4...), jamais les primitives. Architecture en 2 niveaux : 1. Primitives (--stone-*, --ink-*, --sage-*...) = la palette brute. 2. Sémantiques (--foreground, --muted, --ring...) = le rôle d'une couleur. Le thème sombre ne redéfinit QUE les sémantiques (voir [data-theme="dark"]), donc aucun composant n'a besoin d'être réécrit pour le supporter. Ordre des couches CSS (déclaré ici, fichier chargé en premier) : tokens < base < legacy < components < utilities - "legacy" = les styles historiques de index.html, encapsulés. - Un composant appliqué explicitement gagne donc toujours sur l'ancien CSS. Vanilla, sans build, sans dépendance. Compatible Cloudflare Static Assets. ========================================================================== */ @layer tokens, base, legacy, components, utilities; @layer tokens { :root { /* ------------------------------------------------------------------ 1. PRIMITIVES — palette brute (seul endroit autorisé pour du hex) ------------------------------------------------------------------ */ /* Pierre : neutres chauds, signature calme de Corner */ --stone-0: #FFFFFF; --stone-50: #FAFAF8; --stone-100: #F4F3EF; --stone-200: #ECEAE3; --stone-300: #E5E3DC; --stone-400: #9A988F; --stone-500: #838883; --stone-600: #6A6A64; --stone-700: #4A4A45; /* Encre : noirs bleutés, couleur d'action de Corner */ --ink-900: #111110; --ink-800: #111110; --ink-700: #2A2A27; /* Nuit : neutres du thème sombre (chauds, jamais noir pur) */ --night-950: #0A0A09; --night-900: #131310; --night-800: #22221F; --night-700: #2E2D29; /* Reakly-like : fonds doux des tuiles d'icone (touches de couleur) */ --tint-green: #E9F4EE; --tint-blue: #E8F0FB; --tint-violet: #EFEDFB; --tint-amber: #FBF3E4; --tint-rose: #FBEAEF; --tint-stone: #F4F3EF; /* Couleurs fonctionnelles (désaturées, jamais néon) */ --sage-400: #3FAE7C; --sage-500: #1F8A5B; --sage-700: #1A7A50; --clay-400: #E07A5F; --clay-600: #C2412D; --clay-700: #973A23; --amber-400: #D9AE55; --amber-500: #C98A1B; --amber-700: #86621A; --slate-300: #93AED0; --slate-400: #2F6FD0; --slate-700: #3D5A99; --violet-400: #7C6BD6; --rose-400: #D9577A; /* Identité d'écran héritée (titres de section). À réévaluer lors de la refonte des pages : couleur décorative, pas fonctionnelle. */ --brown-700: #5C4A3A; --teal-700: #256F63; --plum-700: #7A4A6B; --slate-600: #4A5560; /* ------------------------------------------------------------------ 2. COULEURS SÉMANTIQUES — thème clair (par défaut) Chaque couleur a un rôle. Contrastes vérifiés (WCAG 2.2) : foreground/background 18:1 · muted-foreground/background 5.7:1 muted-foreground/muted 4.9:1 · primary-foreground/primary 15.6:1 input/background 3.5:1 (limite de champ, critère 1.4.11) ------------------------------------------------------------------ */ --background: var(--stone-0); /* fond de page */ --foreground: var(--ink-900); /* texte principal */ --card: var(--stone-0); /* surface posée sur le fond */ --card-foreground: var(--ink-900); --popover: var(--stone-0); /* menus, dialogues, toasts */ --popover-foreground: var(--ink-900); --primary: var(--ink-800); /* action principale */ --primary-foreground: var(--stone-0); --primary-hover: var(--ink-700); --secondary: var(--stone-100); /* action secondaire */ --secondary-foreground: var(--ink-900); --secondary-hover: var(--stone-200); --muted: var(--stone-100); /* fonds discrets : pistes, champs désactivés */ --muted-foreground: var(--stone-600); /* texte secondaire (AA partout) */ --subtle-foreground: var(--stone-400); /* texte NON essentiel uniquement (2.7:1) */ --accent: var(--stone-100); /* survol des éléments neutres (ghost, menu) */ --accent-foreground: var(--ink-900); --destructive: var(--clay-600); /* suppression, erreur, retard */ --destructive-foreground: var(--stone-0); --destructive-hover: var(--clay-700); --success: var(--sage-700); /* objectif atteint, action faite */ --success-foreground: var(--stone-0); --warning: var(--amber-700); /* rythme à surveiller */ --warning-foreground: var(--stone-0); --info: var(--slate-700); /* information neutre */ --info-foreground: var(--stone-0); /* Fonds doux dérivés (8 %) : une seule règle, valable en clair et sombre */ --destructive-soft: color-mix(in srgb, var(--destructive) 8%, var(--background)); --success-soft: color-mix(in srgb, var(--success) 8%, var(--background)); --warning-soft: color-mix(in srgb, var(--warning) 8%, var(--background)); --info-soft: color-mix(in srgb, var(--info) 8%, var(--background)); --border: var(--stone-300); /* séparateurs, contours de carte */ --border-strong: #D6D3C9; /* contours de bouton outline, badges */ --input: var(--stone-500); /* contour des champs de formulaire */ --ring: var(--ink-800); /* anneau de focus clavier */ --overlay: rgb(17 17 16 / 0.45); /* voile derrière un dialogue */ /* Palette de catégories (domaines d'objectifs) : réservée aux données, jamais aux boutons ni aux fonds de page. */ --domain-sport: var(--sage-500); --domain-money: var(--amber-500); --domain-mindset: var(--violet-400); --domain-creative: var(--rose-400); --domain-career: var(--slate-400); --domain-other: var(--stone-600); /* Identité de section héritée (voir primitives) */ --section-home: var(--foreground); --section-goals: var(--foreground); --section-progression: var(--foreground); --section-coach: var(--foreground); --section-profile: var(--foreground); /* ------------------------------------------------------------------ 3. TYPOGRAPHIE 8 tailles seulement, 3 graisses. La hiérarchie vient du rythme et du contraste, pas de la multiplication des tailles. ------------------------------------------------------------------ */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-display: "Schibsted Grotesk", "Inter", system-ui, sans-serif; --font-serif: "Instrument Serif", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.375rem; /* 22 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: 2.25rem; /* 36 */ --text-4xl: 2.75rem; /* 44 */ --font-regular: 400; --font-medium: 500; --font-semibold: 600; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; /* Rôles typographiques : c'est ICI que le responsive change la hiérarchie */ /* Base = très petits écrans (< 360 px, ex. iPhone SE 1re gén.) */ --type-display: var(--text-2xl); --type-h1: var(--text-xl); --type-h2: var(--text-lg); --type-h3: var(--text-base); --type-stat: var(--text-2xl); --type-stat-lg: var(--text-3xl); /* ------------------------------------------------------------------ 4. ESPACEMENT — échelle de 4 px ------------------------------------------------------------------ */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --page-gutter: var(--space-4); /* Tailles de contrôle (boutons, champs) */ --control-sm: 2rem; /* 32 */ --control-md: 2.5rem; /* 40 */ --control-lg: 3rem; /* 48 */ --touch-target: 2.75rem; /* 44 — minimum tactile */ /* Largeurs de contenu */ --container-sm: 40rem; --container-md: 48rem; --container-lg: 64rem; --container-xl: 80rem; --measure: 65ch; /* ------------------------------------------------------------------ 5. RAYONS — langage Corner : ce qu'on PRESSE est une pilule (boutons, badges, onglets, interrupteurs), ce qui CONTIENT est un rectangle adouci (cartes, champs, dialogues). ------------------------------------------------------------------ */ --radius-sm: 6px; /* cases à cocher, infobulles */ --radius-md: 10px; /* champs, éléments de menu */ --radius-lg: 14px; /* cartes, alertes, menus */ --radius-xl: 20px; /* dialogues, feuilles */ --radius-full: 9999px; /* pilules */ /* ------------------------------------------------------------------ 6. ÉLÉVATION — discrète. Le premium vient de l'espace et du contraste. ------------------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgb(17 17 16 / 0.05); --shadow-md: 0 12px 28px rgb(17 17 16 / 0.07), 0 2px 6px rgb(17 17 16 / 0.04); --shadow-lg: 0 20px 42px rgb(17 17 16 / 0.12), 0 2px 8px rgb(17 17 16 / 0.05); --shadow-cta: 0 14px 30px -14px rgb(17 17 16 / 0.5); /* ------------------------------------------------------------------ 7. MOUVEMENT ------------------------------------------------------------------ */ --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); /* ------------------------------------------------------------------ 8. FOCUS ------------------------------------------------------------------ */ --ring-width: 2px; --ring-offset: 2px; /* ------------------------------------------------------------------ 9. PROFONDEUR (z-index) ------------------------------------------------------------------ */ --z-dropdown: 50; --z-sticky: 100; --z-overlay: 200; --z-toast: 300; --z-tooltip: 400; /* ------------------------------------------------------------------ 10. POINTS DE RUPTURE (référence — non utilisables dans @media) xs 360 · sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536 Les media queries du système utilisent ces valeurs exactes. ------------------------------------------------------------------ */ --bp-xs: 360px; --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; color-scheme: light; } /* ---------------- Responsive : la hiérarchie change, pas juste la taille */ @media (min-width: 360px) { :root { --type-display: var(--text-3xl); --type-h1: var(--text-2xl); --type-h2: var(--text-xl); --type-h3: var(--text-lg); } } @media (min-width: 768px) { :root { --page-gutter: var(--space-6); --type-h1: var(--text-3xl); --type-h2: var(--text-2xl); --type-h3: var(--text-xl); --type-stat-lg: var(--text-4xl); } } @media (min-width: 1024px) { :root { --type-display: var(--text-4xl); } } @media (min-width: 1280px) { :root { --page-gutter: var(--space-8); } } /* ---------------- Mouvement réduit : toutes les transitions deviennent instantanées */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } } /* ---------------- Thème sombre : prêt, NON activé dans l'app. Activation : . Seuls les rôles changent. */ [data-theme="dark"] { --background: var(--night-950); --foreground: var(--stone-100); --card: var(--night-900); --card-foreground: var(--stone-100); --popover: var(--night-900); --popover-foreground: var(--stone-100); --primary: var(--stone-100); --primary-foreground: var(--ink-900); --primary-hover: var(--stone-200); --secondary: var(--night-800); --secondary-foreground: var(--stone-100); --secondary-hover: var(--night-700); --muted: var(--night-800); --muted-foreground: var(--stone-400); --subtle-foreground: var(--stone-600); --accent: var(--night-800); --accent-foreground: var(--stone-100); --destructive: var(--clay-400); --destructive-foreground: var(--ink-900); --destructive-hover: var(--clay-600); --success: var(--sage-400); --success-foreground: var(--ink-900); --warning: var(--amber-400); --warning-foreground: var(--ink-900); --info: var(--slate-300); --info-foreground: var(--ink-900); /* Redéclarés ici pour qu'un sous-arbre en thème sombre se recalcule */ --destructive-soft: color-mix(in srgb, var(--destructive) 8%, var(--background)); --success-soft: color-mix(in srgb, var(--success) 8%, var(--background)); --warning-soft: color-mix(in srgb, var(--warning) 8%, var(--background)); --info-soft: color-mix(in srgb, var(--info) 8%, var(--background)); --border: rgb(255 255 255 / 0.09); --border-strong: rgb(255 255 255 / 0.18); --input: var(--stone-600); --ring: var(--stone-100); --overlay: rgb(0 0 0 / 0.6); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-md: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 20px -6px rgb(0 0 0 / 0.5); --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.3), 0 20px 44px -12px rgb(0 0 0 / 0.65); color-scheme: dark; } } /* Propriété animable (anneau de progression). Hors couche : @property est global. */ @property --value { syntax: ""; inherits: true; initial-value: 0; }