/* ============================================================ KEERA — TOKENS ADAPTÉ à la convention du projet : clair par défaut, [data-theme="dark"] pour le sombre (comme le script inline de index.html qui lit localStorage). Ce fichier ne contient AUCUN reset et AUCUN style sur , pour ne pas entrer en conflit avec app.css / signer.css. ORDRE D'IMPORT OBLIGATOIRE : 1. css/app.css (l'existant) 2. css/tokens.css (ce fichier — après, pour que ses :root gagnent) 3. css/motion.css 4. css/components.css 5. css/keera-bridge.css ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap"); /* ---------- THÈME CLAIR (défaut) ---------- */ :root{ --k-bg: #EFF2F1; --k-panel: #FFFFFF; --k-card: #FFFFFF; --k-card-2: #F5F8F7; --k-tile: rgba(9,26,23,.05); --k-line: rgba(9,26,23,.09); --k-line-2: rgba(9,26,23,.16); --k-text: #0C1614; --k-text-2: #56675F; --k-text-3: #82938C; --k-accent: #0E9E88; /* dérivé de ton #12B5A6, assombri pour le contraste AA */ --k-accent-2: #0A8271; /* Texte posé SUR un aplat d'accent (bouton plein), blanc dans les deux thèmes. Contraste sur le dégradé accent → accent-2 : 3,3:1 côté clair, 4,7:1 côté foncé — le haut du dégradé passe sous le seuil AA (4,5:1) pour du texte normal. Choix visuel assumé ; pour repasser AA sur toute la surface il faudrait assombrir --k-accent (≈ #0B7A6A). */ --k-on-accent: #FFFFFF; --k-accent-dim: rgba(14,158,136,.11); --k-violet: #6D5DE0; --k-violet-dim: rgba(109,93,224,.11); --k-green:#16A34A; --k-amber:#B45309; --k-red:#DC2626; /* Palette catégorielle (dataviz skill, references/palette.md) : Keera n'a qu'une seule teinte de marque — insuffisante pour coder l'identité de plusieurs séries (ex. répartition du CA par assureur). 4 premiers slots de la palette de référence validée (adjacent ΔE 9.1 clair / 8.4 sombre, contraste : relief requis, cf. usage — labels visibles obligatoires). */ --k-cat-1:#2A78D6; --k-cat-2:#EB6834; --k-cat-3:#1BAF7A; --k-cat-4:#EDA100; --k-sh-card: 0 18px 40px -30px rgba(9,26,23,.35); --k-sh-float: 0 30px 70px -30px rgba(9,26,23,.3); --k-sh-accent:0 12px 26px -16px var(--k-accent); /* Ambiance de fond en clair : version très atténuée de celle du sombre. Pas de halo violet (réservé au sombre, cf. bloc [data-theme="dark"] ci-dessous — le violet en aplat de fond a besoin d'un fond sombre pour ne pas paraître délavé) : une pointe d'accent en haut à droite tient lieu de halo, complétée par la trame de points (règle 8 du design system — pas d'ombre lourde en clair, la profondeur vient des halos, de la trame et du grain). Partagée par et .topbar. */ --k-ambient-img: radial-gradient(ellipse 700px 520px at 82% -8%, color-mix(in srgb, var(--k-accent) 10%, transparent) 0%, color-mix(in srgb, var(--k-accent) 4%, transparent) 45%, transparent 72%), radial-gradient(ellipse 90% 70% at 50% 100%, transparent 60%, rgba(9,26,23,.035) 100%), radial-gradient(circle at 1px 1px, var(--k-line) 1px, transparent 0); --k-ambient-size: auto, 100% 100%, 32px 32px; --k-ambient-repeat: no-repeat, no-repeat, repeat; --k-ambient-attach: fixed, fixed, fixed; /* ---------- INVARIANTS (identiques dans les deux thèmes) ---------- */ --ff-display:"Space Grotesk", system-ui, sans-serif; --ff-ui: "Inter", system-ui, sans-serif; --ff-mono: "JetBrains Mono", ui-monospace, monospace; --fs-hero:clamp(24px,2.8vw,34px); --fs-kpi:30px; --fs-kpi-eur:24px; --fs-h2:15px; --fs-body:13px; --fs-sm:11.5px; --fs-micro:10px; --ls-tight:-.03em; --ls-num:-.04em; --ls-wide:.2em; --r-xs:9px; --r-sm:11px; --r-md:14px; --r-lg:18px; --r-pill:99px; --e-out: cubic-bezier(.2,.8,.3,1); --e-spring: cubic-bezier(.34,1.4,.5,1); --e-pop: cubic-bezier(.3,1.5,.5,1); --e-drawer: cubic-bezier(.3,1,.4,1); --d-fast:.18s; --d:.28s; --d-slow:.45s; --d-enter:.55s; --d-draw:1.5s; --stagger:60ms; } /* ---------- THÈME SOMBRE ---------- */ [data-theme="dark"]{ --k-bg: #0B1015; --k-panel: #0A0B10; --k-card: #101117; --k-card-2: #15161F; --k-tile: rgba(255,255,255,.06); --k-line: rgba(255,255,255,.07); --k-line-2: rgba(255,255,255,.14); --k-text: #EDEEF3; --k-text-2: #959AAA; --k-text-3: #666B7D; --k-accent: #2FD8B4; --k-accent-2: #12A98B; --k-accent-dim: rgba(47,216,180,.13); --k-violet: #8B7CF6; --k-violet-dim: rgba(139,124,246,.16); --k-green:#4ADE80; --k-amber:#FBBF24; --k-red:#F87171; --k-cat-1:#3987E5; --k-cat-2:#D95926; --k-cat-3:#199E70; --k-cat-4:#C98500; --k-sh-card: 0 24px 50px -30px rgba(0,0,0,.9); --k-sh-float: 0 40px 90px -30px rgba(0,0,0,.9); --k-sh-accent:0 14px 32px -16px var(--k-accent); /* Ambiance de fond : halo violet resserré + pointe turquoise + trame de points + léger vignettage — remplace entièrement la version claire ci-dessus (mêmes noms de variables, cf. --k-ambient-* dans le :root clair). Partagée par et .topbar (app.css / keera-shell.css) pour que le halo se prolonge visuellement dans la topbar au lieu de s'arrêter net dessous — les deux sont ancrés au viewport (background-attachment:fixed), donc les dégradés se raccordent au pixel près. */ --k-ambient-img: radial-gradient(ellipse 90% 85% at 50% 50%, transparent 58%, rgba(0,0,0,.38) 100%), radial-gradient(ellipse 560px 420px at 64% 12%, color-mix(in srgb, var(--k-violet) 36%, transparent) 0%, color-mix(in srgb, var(--k-violet) 17%, transparent) 28%, color-mix(in srgb, var(--k-violet) 6%, transparent) 50%, transparent 70%), radial-gradient(ellipse 520px 400px at -4% 106%, color-mix(in srgb, var(--k-accent) 20%, transparent) 0%, color-mix(in srgb, var(--k-accent) 8%, transparent) 40%, transparent 70%), radial-gradient(circle at 1px 1px, var(--k-line) 1px, transparent 0); --k-ambient-size: 100% 100%, auto, auto, 32px 32px; --k-ambient-repeat: no-repeat, no-repeat, no-repeat, repeat; --k-ambient-attach: fixed, fixed, fixed, fixed; } /* ---------- ALIAS ---------- motion.css et components.css utilisent --accent, --card, --text… Ces alias les branchent sur les variables --k-* sans risque de collision avec les variables déjà définies dans app.css. */ :root,[data-theme="dark"]{ --bg:var(--k-bg); --panel:var(--k-panel); --card:var(--k-card); --card-2:var(--k-card-2); --tile:var(--k-tile); --line:var(--k-line); --line-2:var(--k-line-2); --text:var(--k-text); --text-2:var(--k-text-2); --text-3:var(--k-text-3); --accent:var(--k-accent); --accent-2:var(--k-accent-2); --accent-dim:var(--k-accent-dim); --violet:var(--k-violet); --violet-dim:var(--k-violet-dim); --green:var(--k-green); --amber:var(--k-amber); --red:var(--k-red); --sh-card:var(--k-sh-card); --sh-float:var(--k-sh-float); --sh-accent:var(--k-sh-accent); } /* ---------- UTILITAIRES ---------- .eyebrow a été renommé .k-eyebrow : ton index.html utilise déjà .eyebrow sur l'écran de connexion. */ .k-num{font-family:var(--ff-display);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-num)} .k-mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums} .k-eyebrow{font-family:var(--ff-mono);font-size:var(--fs-micro);font-weight:500; letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--k-text-3)} .u-grain::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.03; background-image: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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")} .u-dots{background-image:radial-gradient(circle at 1px 1px,var(--k-line) 1px,transparent 0);background-size:28px 28px}