/* core-theme.css — Design System ATOM4LOVE / UPlanet Source of truth : couleurs sémantiques, typographie, z-index. Charger EN PREMIER, avant uplanet-atomic.css et tout autre feuille de style. Ne contient aucun sélecteur de composant — uniquement des tokens. */ /* ═══════════════════════════════════════════════════════════════════════════ PALETTE SÉMANTIQUE ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Surfaces ── */ --bg-base: #030508; /* fond le plus profond */ --bg-surface: #080602; /* fond de page (ambre par défaut) */ --bg-elevated: #0f0d09; /* panneaux, cartes */ --bg-glass: rgba(8,6,2,.92); /* éléments transparents avec blur */ /* ── Texte ── */ --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: rgba(255,255,255,.35); /* ── Accents ── */ --accent-main: #00ffcc; /* teal holographique — accent primaire */ --accent-alt: #a78bfa; /* violet — accent secondaire */ --accent-success: #00e676; /* vert — état OK */ --accent-warning: #ffab40; /* orange — attention */ --accent-danger: #ff5252; /* rouge — erreur */ --accent-gold: #f5c842; /* or — KIN Maya */ --accent-amber: #f59e0b; /* ambre — primaire thème par défaut */ /* ── Bordures ── */ --border-subtle: rgba(255,255,255,.08); --border-dim: rgba(255,255,255,.12); --border-accent: rgba(0,255,204,.3); /* ── Aurora (canvas p5.js) ── */ --aurora-a: rgba(0,255,204,.07); --aurora-b: rgba(168,85,247,.05); --aurora-c: rgba(245,158,11,.05); /* ── Aliases de rétrocompatibilité ───────────────────────────────────── Permettent de migrer progressivement sans casser les var(--primary) déjà en place dans le HTML et le CSS existants. Ne pas supprimer. */ --primary: var(--accent-main); --teal: var(--accent-main); --secondary: var(--accent-alt); --gold: var(--accent-gold); --violet: #b464ff; --bg-deep: var(--bg-surface); --bg-panel: rgba(10,12,22,.95); --card: var(--bg-elevated); --border: var(--border-subtle); --h: var(--text-primary); --text: var(--text-secondary); } /* ═══════════════════════════════════════════════════════════════════════════ THÈMES KIN — appliqués via data-theme sur ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="biolum"] { --accent-main: #00f5d4; --accent-alt: #a78bfa; --bg-surface: #05080f; --bg-glass: rgba(5,8,15,.92); --aurora-a: rgba(0,245,212,.08); --aurora-b: rgba(167,139,250,.07); --aurora-c: rgba(56,189,248,.05); } [data-theme="kin-rouge"] { --accent-main: #ef4444; --accent-alt: #f97316; --bg-surface: #0a0302; --bg-glass: rgba(10,3,2,.92); --aurora-a: rgba(239,68,68,.08); --aurora-b: rgba(249,115,22,.05); --aurora-c: rgba(239,68,68,.04); } [data-theme="kin-blanc"] { --accent-main: #94a3b8; --accent-alt: #b0c4de; --bg-surface: #060809; --bg-glass: rgba(6,8,9,.92); --aurora-a: rgba(148,163,184,.06); --aurora-b: rgba(176,196,222,.05); --aurora-c: rgba(148,163,184,.04); } [data-theme="kin-bleu"] { --accent-main: #60a5fa; --accent-alt: #06b6d4; --bg-surface: #020610; --bg-glass: rgba(2,6,16,.92); --aurora-a: rgba(96,165,250,.08); --aurora-b: rgba(6,182,212,.07); --aurora-c: rgba(96,165,250,.05); } [data-theme="kin-jaune"] { --accent-main: #fbbf24; --accent-alt: #f59e0b; --bg-surface: #080601; --bg-glass: rgba(8,6,1,.92); --aurora-a: rgba(251,191,36,.07); --aurora-b: rgba(245,158,11,.05); --aurora-c: rgba(251,191,36,.04); } [data-theme="kin-vert"] { --accent-main: #34d399; --accent-alt: #00ffcc; --bg-surface: #020d07; --bg-glass: rgba(2,13,7,.92); --aurora-a: rgba(52,211,153,.08); --aurora-b: rgba(0,255,204,.06); --aurora-c: rgba(52,211,153,.04); } /* ═══════════════════════════════════════════════════════════════════════════ TYPOGRAPHIE ═══════════════════════════════════════════════════════════════════════════ */ :root { --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --text-xs: .6rem; --text-sm: .72rem; --text-md: .88rem; --text-base: 1rem; --text-lg: 1.15rem; } /* ═══════════════════════════════════════════════════════════════════════════ ÉCHELLE DE Z-INDEX Chaque couche a une plage de 10–100 pour permettre des ajustements locaux. ═══════════════════════════════════════════════════════════════════════════ */ :root { --z-base: 1; /* contenu standard */ --z-above: 10; /* éléments au-dessus du contenu (canvas, pseudos) */ --z-map: 100; /* contrôles Leaflet, penta-btn, stats-bar */ --z-panel: 900; /* panneaux latéraux glissants (#panel) */ --z-nav: 1000; /* headers de pages normales, navs secondaires */ --z-doc-tab: 1100; /* #doc-tabs (atomic_help) — sous le top-header a4l */ --z-header: 1200; /* #a4l-header top fixe */ --z-bnav: 1300; /* #a4l-bottom-nav (au-dessus du top-header) */ --z-overlay: 1999; /* fond d'assombrissement de modale */ --z-modal: 2000; /* fenêtres modales, DM box */ --z-loading: 2100; /* écran de chargement (#loading) */ --z-toast: 9990; /* notifications toast (#a4l-toast, #security-toast) */ } /* ═══════════════════════════════════════════════════════════════════════════ ANIMATIONS COMMUNES Définies ici une seule fois ; référencées partout par nom. ═══════════════════════════════════════════════════════════════════════════ */ @keyframes a4l-spin { to { transform: rotate(360deg); } } @keyframes a4l-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes a4l-pulse-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,204,0); } 50% { box-shadow: 0 0 0 6px rgba(0,255,204,.25); } } @keyframes aurora { 0% { transform: translate(0,0) scale(1); opacity: .8; } 33% { transform: translate(4%,3%) scale(1.04); opacity: 1; } 66% { transform: translate(-3%,5%) scale(.97); opacity: .9; } 100% { transform: translate(6%,-4%) scale(1.06); opacity: 1; } } /* mp = marqueur pulsant (Home GPS marker, bouton ready) */ @keyframes mp { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .7; } }