/* ========================================================================= HORNETPATH - TOKENS « LA RUCHE » Bleu marine profond + miel / or. Sombre par defaut, `.light` sur bascule vers la cire chaude. Aucune valeur en dur ailleurs : tout passe ici. ========================================================================= */ :root { /* ---------- Couleurs : la ruche de nuit (defaut) ---------- */ --paper: #0d1524; /* fond de page */ --cream: #16223a; /* surface panneau */ --mist: #1f2d49; /* surface 2 / survol */ --line: #2d3e60; /* bordures */ --ink: #eef3fd; /* texte principal */ --fog: #93a3c4; /* texte secondaire */ --ember: #f5a623; /* accent principal (miel) */ --flame: #e0890c; /* miel profond (bas de degrade) */ --honey: #fbc650; /* or clair (eyebrow, liens) */ --terra: #f2704f; /* destructif */ --sap: #34c782; /* succes */ --azure: #3876e0; /* bleu secondaire (categorie cours) */ --azure-ink: #7ea8f0;/* texte bleu lisible sur fond sombre */ /* Canaux RGB, pour composer des alphas sans color-mix */ --rgb-ember: 245 166 35; --rgb-honey: 251 198 80; --rgb-azure: 56 118 224; --rgb-terra: 242 112 79; --rgb-sap: 52 199 130; --rgb-paper: 13 21 36; /* Texte pose sur un aplat miel. Jamais blanc : contraste insuffisant. */ --on-ember: #1a1206; /* ---------- Typographie ---------- */ --font-display: "Inter", ui-sans-serif, system-ui, sans-serif; --font-sans: "Inter", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 19px; --fs-xl: 24px; --fs-2xl: 34px; --fs-page: clamp(34px, 6vw, 60px); --lh-tight: 1.04; --lh-snug: 1.24; --lh-body: 1.6; --ls-page: -.03em; --ls-title: -.02em; --ls-wide: .2em; /* eyebrows, sechead */ /* ---------- Espacement (pas de 4px) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 28px; --sp-7: 38px; --sp-8: 52px; --sp-9: 72px; --gutter: clamp(20px, 5vw, 48px); --measure: 60ch; /* longueur de ligne confortable */ --page-max: 1000px; /* largeur de contenu */ --topbar-h: 66px; /* ---------- Rayons ---------- */ --r-sm: .5rem; --r-md: .625rem; /* champs */ --r-lg: .7rem; /* boutons */ --r-panel: 1rem; /* panneaux */ --r-glass: 1.25rem; /* liquid glass */ --r-pill: 9999px; /* pilules uniquement */ /* ---------- Ombres : longues, basses, spread negatif ---------- */ --sh-1: 0 10px 30px -18px rgb(0 0 0 / .6); --sh-2: 0 26px 52px -30px rgb(0 0 0 / .8); --sh-3: 0 32px 62px -30px rgb(0 0 0 / .78); --sh-ember: 0 10px 30px -10px rgb(var(--rgb-ember) / .55); --sh-inset-top: inset 0 1px 0 rgb(255 255 255 / .04); /* ---------- Verre ---------- */ --glass-blur: 16px; --glass-sat: 150%; --glass-tint: rgb(22 34 58 / .72); /* ---------- Motion ---------- */ --ease: cubic-bezier(.2,.7,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --t-fast: .15s; --t-base: .22s; --t-slow: .7s; /* ---------- Empilement ---------- */ --z-base: 0; --z-sticky: 20; --z-dropdown: 40; --z-overlay: 60; --z-modal: 70; --z-toast: 80; --z-tooltip: 90; /* ---------- Motif nid-d'abeille (teinte miel en sombre) ---------- */ --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='%23f5a623' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v11.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E"); } /* ========================================================================= MODE CLAIR - la cire chaude / le rayon de miel. Ce n'est PAS une inversion : le fond est creme, jamais gris. ========================================================================= */ :root.light { --paper: #f7f1e3; --cream: #fffdf7; --mist: #f0e7d2; --line: #e7dcc0; --ink: #16233c; --fog: #6f6650; --ember: #cf860d; --flame: #a86c08; --honey: #b1841c; --terra: #c2543a; --sap: #1f9d63; --azure-ink: #2f68c8; --rgb-ember: 207 134 13; --rgb-honey: 177 132 28; --rgb-paper: 247 241 227; --on-ember: #2a1a02; --sh-1: 0 1px 2px rgb(40 32 15 / .05), 0 10px 26px -18px rgb(40 32 15 / .22); --sh-2: 0 1px 2px rgb(40 32 15 / .05), 0 18px 44px -26px rgb(40 32 15 / .28); --sh-3: 0 1px 2px rgb(40 32 15 / .05), 0 28px 54px -28px rgb(40 32 15 / .35); --sh-ember: 0 8px 24px -10px rgb(var(--rgb-ember) / .5); --sh-inset-top: inset 0 1px 0 rgb(255 255 255 / .6); --glass-tint: rgb(255 253 247 / .82); /* nid-d'abeille - teinte marine en clair */ --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='%2316233c' fill-opacity='0.055' fill-rule='evenodd'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v11.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E"); } /* ========================================================================= FOND DE PAGE - obligatoire. Motif hexagonal + 3 halos + vignette. Sans ce fond, la page n'est pas Hornetpath. ========================================================================= */ body { background-color: var(--paper); background-image: var(--hex), radial-gradient(1100px 700px at 84% -18%, rgb(245 166 35 / .13), transparent 60%), radial-gradient(950px 680px at -14% 112%, rgb(56 118 224 / .16), transparent 60%), radial-gradient(650px 480px at 52% 30%, rgb(13 21 36 / .5), transparent 65%); background-attachment: fixed; } :root.light body { background-image: var(--hex), radial-gradient(1100px 700px at 84% -18%, rgb(207 134 13 / .14), transparent 60%), radial-gradient(950px 680px at -14% 112%, rgb(56 118 224 / .1), transparent 60%), radial-gradient(650px 480px at 52% 30%, rgb(255 253 247 / .7), transparent 65%); }