/* ============================================================ beebot — Design tokens (source unique de vérité) Mood par défaut : "Bourdon" (noir chaud profond + jaune abeille #FFC629 + crème #F7F1E3). Fond gris neutre sombre, jamais noir pur. Voir DESIGN_SYSTEM.md §2. Moods alternatifs : ============================================================ */ /* — Polices self-host : déposer les .woff2 dans ./fonts/ — (fallbacks système prévus tant que les fichiers ne sont pas là) */ @font-face{font-family:"Cabinet Grotesk";src:url("./fonts/CabinetGrotesk-Variable.woff2") format("woff2");font-weight:300 800;font-display:swap} @font-face{font-family:"Geist";src:url("./fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap} @font-face{font-family:"Geist Mono";src:url("./fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap} :root{ /* — Fonds (sable chaud, jamais de noir) — bg-void = puits/champs clairs ; base = fond principal ; surface = cartes. Le chrome sombre (nav/footer/console) utilise --teal, pas bg-void. */ --bg-void:#070707; --bg-base:#0C0B09; --bg-surface:#141310; --bg-surface-2:#1C1A15; --bg-surface-3:#26231C; /* — Bordures — */ --border:#262319; --border-strong:#3A3628; --border-honey:rgba(255,198,41,.35); /* — Texte (bleu-blanc clair sur indigo) — */ --text-hi:#F7F1E3; --text:#D8D1BF; --text-muted:#9E9784; --text-dim:#6C665A; /* — OR doré : l'accent héros (= le miel) — */ --honey:#FFC629; --honey-bright:#FFD95C; --honey-deep:#E0A800; --pollen:#FFE9A3; --honey-glow:rgba(255,198,41,.30); --honey-tint:rgba(255,198,41,.12); --honey-line:rgba(255,198,41,.24); --on-honey:#191300; /* — CHROME (nav / footer / console = indigo sombre) + IRIS (accent pointillé Dofus) — */ --teal:#070707; --teal-2:#0C0B09; --teal-line:rgba(255,255,255,.05); --on-teal:#F7F1E3; --iris:#B39DDB; --iris-line:rgba(179,157,219,.40); --iris-tint:rgba(179,157,219,.12); /* — Sémantique (couleurs d'éléments, calibrées pour fond sombre) — */ --nectar:#9ACB61; --nectar-bg:rgba(154,203,97,.14); /* succès / air */ --wasp:#EA5A47; --wasp-bg:rgba(234,90,71,.14); /* danger / feu */ --warn:#E09112; --warn-bg:rgba(224,145,18,.14); --cool:#7FAECB; /* eau / infos */ /* — Élévation — */ --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow:0 12px 36px rgba(0,0,0,.55); --shadow-honey:0 0 0 1px var(--honey-line), 0 8px 32px var(--honey-glow); /* — Rayons — */ --r-sm:9px; --r:13px; --r-lg:17px; --r-xl:24px; --r-pill:999px; /* — Typo — */ --font-display:"Cabinet Grotesk","Geist",system-ui,sans-serif; --font-sans:"Geist",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif; --font-mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace; /* — Espacement (échelle 4px) — */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; /* — Motif — (data-URI : indépendant de la profondeur du fichier qui consomme la variable. Le fichier shared/honeycomb.svg reste dispo pour un usage direct/édition.) */ --honeycomb:linear-gradient(180deg,rgba(255,198,41,.05),rgba(255,198,41,0) 45%); } /* ===== Moods alternatifs (override ~8 variables) ===== */ /* L'ancienne identité sombre, conservée en option (data-mood="amber-noir") */ :root[data-mood="amber-noir"]{ --bg-void:#0A0A0B; --bg-base:#0E0E10; --bg-surface:#16161A; --bg-surface-2:#1D1D22; --bg-surface-3:#26262C; --border:#2A2A31; --border-strong:#3A3A42; --border-honey:rgba(255,179,0,.28); --text-hi:#F5F0E6; --text:#C9C4BA; --text-muted:#8A857A; --text-dim:#5C584F; --honey:#FFB300; --honey-bright:#FFC93C; --honey-deep:#E08600; --pollen:#FFD54F; --honey-glow:rgba(255,179,0,.35); --honey-tint:rgba(255,179,0,.10); --honey-line:rgba(255,179,0,.20); --on-honey:#1A1200; --teal:#16161A; --teal-2:#1D1D22; --on-teal:#F5F0E6; --nectar:#A3D85C; --nectar-bg:rgba(163,216,92,.12); --wasp:#FF5A3C; --wasp-bg:rgba(255,90,60,.12); --warn:#FF9F1C; --warn-bg:rgba(255,159,28,.12); --cool:#5EC8FF; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 8px 24px rgba(0,0,0,.45); } :root[data-mood="cyber-hive"]{ --bg-void:#060807; --bg-base:#0A0D0B; --bg-surface:#0E1310; --bg-surface-2:#141A16; --bg-surface-3:#1B231D; --border:#1E2A20; --border-strong:#2C3A2E; --border-honey:rgba(198,255,0,.28); --honey:#C6FF00; --honey-bright:#D9FF4D; --honey-deep:#9ACC00; --pollen:#E4FF7A; --honey-glow:rgba(198,255,0,.30); --honey-tint:rgba(198,255,0,.08); --honey-line:rgba(198,255,0,.20); --on-honey:#0A1500; --nectar:#7CF2C0; --wasp:#FF3B6B; --wasp-bg:rgba(255,59,107,.12); } :root[data-mood="royal-honey"]{ --bg-void:#0E0716; --bg-base:#120A1A; --bg-surface:#1C1226; --bg-surface-2:#241731; --bg-surface-3:#2E2140; --border:#2E2138; --border-strong:#3E2E4C; --border-honey:rgba(245,197,66,.30); --honey:#F5C542; --honey-bright:#FFE08A; --honey-deep:#D9A521; --pollen:#FFE08A; --honey-glow:rgba(245,197,66,.32); --honey-tint:rgba(245,197,66,.10); --honey-line:rgba(245,197,66,.22); --on-honey:#1A1200; --nectar:#B9E66A; --wasp:#FF6F8B; --wasp-bg:rgba(255,111,139,.12); } :root[data-mood="light-comb"]{ --bg-void:#F3EBDC; --bg-base:#FBF6EC; --bg-surface:#FFFFFF; --bg-surface-2:#FBF6EC; --bg-surface-3:#F1E7D5; --border:#EDE3D1; --border-strong:#E0D2BA; --border-honey:rgba(224,134,0,.35); --text-hi:#1A1712; --text:#4A453B; --text-muted:#857C6B; --text-dim:#A89D88; --honey:#E08600; --honey-bright:#FFB300; --honey-deep:#B36A00; --pollen:#F5A623; --honey-glow:rgba(224,134,0,.22); --honey-tint:rgba(224,134,0,.08); --honey-line:rgba(224,134,0,.20); --on-honey:#FFFFFF; --nectar:#5E9E1E; --nectar-bg:rgba(94,158,30,.12); --wasp:#E0431F; --wasp-bg:rgba(224,67,31,.10); --warn:#C9760A; --shadow:0 8px 24px rgba(80,60,20,.12); } /* ===== Primitives optionnelles (raccourcis) ===== */ .bb-hex{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)} .bb-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}} /* ── Barres de défilement — Indigo & Or (confort) : piste invisible, pouce indigo qui s'éclaircit au survol et vire à l'or au glissé. Couleurs = tokens → suit le thème. ── */ *::-webkit-scrollbar{width:11px;height:11px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--border-strong);border:3px solid transparent;background-clip:padding-box;border-radius:999px;min-height:34px} *::-webkit-scrollbar-thumb:hover{background:var(--text-dim);background-clip:padding-box} *::-webkit-scrollbar-thumb:active{background:var(--honey);background-clip:padding-box} *::-webkit-scrollbar-corner{background:transparent} *::-webkit-scrollbar-button{display:none} html{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}