/* ============================================================ Akmous — tokens.css Source de vérité UNIQUE du design system (style Linear) Couleurs (clair + sombre), typo, espacements, rayons, ombres, z-index, transitions. Mode contrôlé par [data-theme="light"|"dark"] sur . ============================================================ */ /* ---------- Typo, espacements, rayons (indépendants du thème) ---------- */ :root { /* Famille typographique unique */ --font-sans: "Inter", "Inter Display", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Berkeley Mono", "SF Mono", ui-monospace, "JetBrains Mono", "Menlo", monospace; /* Échelle typographique */ --text-xs: 11px; /* labels, métas */ --text-sm: 12px; /* secondaire dense */ --text-base: 13px; /* corps UI par défaut (Linear) */ --text-md: 14px; /* corps confortable */ --text-lg: 16px; --text-xl: 21px; --text-2xl: 28px; --text-3xl: 40px; --text-4xl: 56px; /* Hauteurs de ligne */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.55; /* Letter-spacing (titres Linear = négatif) */ --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: -0.011em; --tracking-wide: 0.02em; --tracking-caps: 0.06em; /* Poids */ --weight-normal: 400; --weight-medium: 510; --weight-semibold: 590; --weight-bold: 680; /* Espacements (base 4) */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 24px; --space-9: 32px; --space-10: 40px; --space-11: 48px; --space-12: 64px; --space-13: 96px; /* Rayons — modérés, jamais de gros rounded (brief) */ --radius-xs: 4px; --radius-sm: 5px; --radius: 6px; /* défaut composants */ --radius-md: 8px; /* cards, inputs */ --radius-lg: 10px; /* panneaux */ --radius-xl: 12px; /* modales (max) */ --radius-full: 9999px; /* Z-index */ --z-base: 1; --z-sticky: 100; --z-sidebar: 200; --z-dropdown: 300; --z-overlay: 500; --z-modal: 600; --z-toast: 900; /* Transitions */ --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --t-fast: 100ms var(--ease); --t: 150ms var(--ease); --t-slow: 220ms var(--ease); /* Largeurs structure */ --sidebar-w: 236px; --sidebar-collapsed-w: 56px; } /* ============================================================ THÈME CLAIR (défaut) Neutres légèrement froids, accent indigo Linear. ============================================================ */ :root, [data-theme="light"] { color-scheme: light; /* Surfaces */ --bg: #ffffff; /* fond application */ --bg-secondary: #fbfbfc; /* sidebar, panneaux */ --bg-tertiary: #f4f5f7; /* inputs, hover doux */ --bg-elevated: #ffffff; /* cards, modales */ --bg-hover: #f6f7f9; /* hover lignes/rows */ --bg-active: #eef0f4; /* sélection */ --bg-inset: #f7f8fa; /* zones encastrées (code, contenu note) */ /* Bordures */ --border: #ececed; /* 1px subtile (préférée aux ombres) */ --border-strong: #dddde1; --border-focus: var(--accent); /* Texte */ --text: #18191b; /* primaire, presque noir froid */ --text-secondary: #61656d; /* le gris Linear */ /* NOTE a11y : sur fond blanc, #8a8f98 ≈ 3.5:1 — conforme AA pour le texte ≥ 18px mais EN DESSOUS du seuil 4.5:1 pour les labels 11px. Valeur conservée pour fidélité au design (style Linear). Si une conformité AA stricte est requise, descendre vers ~#6e7178. */ --text-tertiary: #8a8f98; /* métas, placeholders */ --text-on-accent: #ffffff; /* Accent — indigo Linear */ --accent: #5e6ad2; --accent-hover: #515dc4; --accent-active: #4751b5; --accent-subtle: #eef0fb; /* fond de badge/chip */ --accent-border: #cdd2f4; --accent-text: #4953bd; /* texte indigo sur fond pâle */ /* Sémantiques */ --success: #3f9a5f; --success-subtle: #e7f4ec; --success-border: #bfe3cc; --success-text: #1d7a44; --warning: #c2890a; --warning-subtle: #fbf1da; --warning-border: #efd79a; --warning-text: #946400; --danger: #d8474c; --danger-subtle: #fbe9ea; --danger-border: #f3c4c6; --danger-text: #c0383d; --info: #2f7fd6; --info-subtle: #e8f1fb; --info-border: #bcd9f4; --info-text: #1f6bc0; /* Catégoriels (modules / activités) */ --c-purple: #8662d6; --c-purple-subtle: #f1ecfb; --c-purple-text: #6c45c4; --c-orange: #df7234; --c-orange-subtle: #fcefe4; --c-orange-text: #c25a1f; --c-teal: #2a9d9d; --c-teal-subtle: #e3f4f4; --c-teal-text: #16807f; --c-pink: #d65a9a; --c-pink-subtle: #fbe9f2; --c-pink-text: #be3f80; --c-slate: #6a7180; --c-slate-subtle: #f1f2f4; --c-slate-text: #4f5562; /* Ombres — quasi inexistantes (brief) */ --shadow-xs: 0 1px 2px rgba(17, 19, 24, 0.04); --shadow-sm: 0 1px 3px rgba(17, 19, 24, 0.06), 0 1px 2px rgba(17, 19, 24, 0.04); --shadow-md: 0 4px 12px rgba(17, 19, 24, 0.08), 0 1px 3px rgba(17, 19, 24, 0.05); --shadow-lg: 0 12px 32px rgba(17, 19, 24, 0.12), 0 4px 8px rgba(17, 19, 24, 0.06); --shadow-overlay: 0 16px 48px rgba(17, 19, 24, 0.18); /* Ring focus */ --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); /* Avatar / branding gradient (rare, autorisé) */ --grad-brand: linear-gradient(135deg, #8b5cf6, #5e6ad2); } /* ============================================================ THÈME SOMBRE (signature Linear) ============================================================ */ [data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg: #08090a; /* near-black froid */ --bg-secondary: #0d0e10; /* sidebar */ --bg-tertiary: #1a1c1f; /* inputs, hover doux */ --bg-elevated: #131417; /* cards, modales */ --bg-hover: #16181b; --bg-active: #1d2024; --bg-inset: #101113; /* Bordures */ --border: #1f2123; /* ~ rgba(255,255,255,.07) */ --border-strong: #2c2e31; --border-focus: var(--accent); /* Texte */ --text: #f7f8f8; --text-secondary: #9499a1; /* gris Linear sombre */ --text-tertiary: #6b6f76; --text-on-accent: #ffffff; /* Accent — légèrement éclairci sur fond sombre */ --accent: #6b76e8; --accent-hover: #818bf0; --accent-active: #5a64d6; --accent-subtle: rgba(110, 121, 227, 0.16); --accent-border: rgba(110, 121, 227, 0.42); --accent-text: #a3abf5; /* Sémantiques */ --success: #4cb872; --success-subtle: rgba(76, 184, 114, 0.15); --success-border: rgba(76, 184, 114, 0.35); --success-text: #6fd396; --warning: #e0a83a; --warning-subtle: rgba(224, 168, 58, 0.15); --warning-border: rgba(224, 168, 58, 0.32); --warning-text: #f0c469; --danger: #f0595e; --danger-subtle: rgba(240, 89, 94, 0.15); --danger-border: rgba(240, 89, 94, 0.34); --danger-text: #ff8589; --info: #4d9cf0; --info-subtle: rgba(77, 156, 240, 0.15); --info-border: rgba(77, 156, 240, 0.34); --info-text: #7fbbff; /* Catégoriels */ --c-purple: #a989f0; --c-purple-subtle: rgba(169,137,240,.16); --c-purple-text: #c0a8f7; --c-orange: #ef8a4f; --c-orange-subtle: rgba(239,138,79,.16); --c-orange-text: #f5a878; --c-teal: #45beba; --c-teal-subtle: rgba(69,190,186,.16); --c-teal-text: #6fd6d2; --c-pink: #ef7bb2; --c-pink-subtle: rgba(239,123,178,.16); --c-pink-text: #f5a0c9; --c-slate: #8b929e; --c-slate-subtle: rgba(139,146,158,.16); --c-slate-text: #aab0ba; /* Ombres — encore plus discrètes, on s'appuie sur les borders */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55); --shadow-overlay: 0 20px 56px rgba(0, 0, 0, 0.6); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent); --grad-brand: linear-gradient(135deg, #a989f0, #6b76e8); }