/* ========================================================================== Belec 2026 — Design tokens Source of truth: "Belec - E-commerce Prototype _standalone_.html" All custom props are prefixed --bel-* to avoid collision with Bootstrap 3. Light is the default. [data-theme="dark"] + [data-accent="*"] override on . ========================================================================== */ :root { /* Brand / accent (default = gold a.k.a. "voltage") */ --bel-gold: #F5CE1A; --bel-gold-hi: #FFE45C; --bel-gold-lo: #D6B008; --bel-gold-ink: #2B2100; /* readable text on a gold fill */ /* Always-dark surfaces (announce / footer / hero ticker) — do NOT invert in dark mode */ --bel-fixed-ink: #0E0E0C; --bel-fixed-ink-2: #1A1A17; --bel-fixed-on-ink: #F4F2E8; --bel-fixed-on-ink-mut: rgba(244,242,232,.6); --bel-fixed-rule: rgba(244,242,232,.14); /* Neutral ink scale (text) */ --bel-ink: #0E0E0C; --bel-ink-2: #1C1C18; --bel-ink-3: #3A3A33; --bel-muted: #6B6A62; --bel-muted-2: #8E8D84; /* Surfaces / lines */ --bel-rule: #E3E0D6; --bel-rule-2: #EFEDE4; --bel-paper: #FAF8F1; /* page background */ --bel-card: #FFFFFF; /* raised surfaces */ --bel-sheet: #F2EEDF; /* inputs, subtle fills */ /* Condition badges */ --bel-new: #176B3A; /* Neuf */ --bel-used: #AE6A12; /* Usagé */ --bel-recond: #6B6A62; /* Reconditionné */ /* Stock states */ --bel-stock-ok: #0F7A3C; --bel-stock-low: #B85C00; --bel-stock-out: #A31E1E; /* Typography */ --bel-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --bel-font-body: "Archivo", "Helvetica Neue", Arial, sans-serif; --bel-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Radii */ --bel-r-xs: 3px; --bel-r-sm: 6px; --bel-r-md: 10px; --bel-r-lg: 16px; /* Shadows */ --bel-shadow-sm: 0 1px 0 rgba(20,18,8,.04), 0 1px 2px rgba(20,18,8,.06); --bel-shadow-md: 0 2px 4px rgba(20,18,8,.05), 0 12px 24px -8px rgba(20,18,8,.12); --bel-shadow-lg: 0 8px 16px -4px rgba(20,18,8,.08), 0 24px 40px -12px rgba(20,18,8,.18); /* Density (tweakable) */ --bel-card-pad: 16px; --bel-card-gap: 16px; /* Layout */ --bel-shell-max: 1480px; --bel-gutter: 28px; /* Motion */ --bel-ease: cubic-bezier(.2,.8,.2,1); --bel-fast: .12s; --bel-base: .18s; } /* ---- Dark mode ---------------------------------------------------------- */ [data-theme="dark"] { --bel-ink: #F4F2E8; --bel-ink-2: #D9D6C9; --bel-ink-3: #A6A39A; --bel-muted: #8E8C82; --bel-muted-2: #6B695F; --bel-rule: #2A2924; --bel-rule-2: #20201C; --bel-paper: #111110; --bel-card: #1A1A17; --bel-sheet: #161612; --bel-shadow-sm: 0 1px 0 rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.4); --bel-shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 12px 24px -8px rgba(0,0,0,.6); --bel-shadow-lg: 0 8px 16px -4px rgba(0,0,0,.5), 0 24px 40px -12px rgba(0,0,0,.7); } /* ---- Accent variants ---------------------------------------------------- */ /* gold/voltage is the :root default; declare explicitly so toggling back works */ [data-accent="voltage"] { --bel-gold: #F5CE1A; --bel-gold-hi: #FFE45C; --bel-gold-lo: #D6B008; --bel-gold-ink: #2B2100; } [data-accent="copper"] { --bel-gold: #D98A2B; --bel-gold-hi: #F2B266; --bel-gold-lo: #A6611A; --bel-gold-ink: #2A1608; } [data-accent="signal"] { --bel-gold: #FF5A1F; --bel-gold-hi: #FF8A5B; --bel-gold-lo: #CC3D08; --bel-gold-ink: #1F0A00; } /* ---- Density variants --------------------------------------------------- */ [data-density="compact"] { --bel-card-pad: 10px; --bel-card-gap: 10px; } [data-density="roomy"] { --bel-card-pad: 22px; --bel-card-gap: 22px; }