/* ============================================================ BasselTech — semantic token sheet · v2.0 Every semantic token is declared EXACTLY ONCE, both themes inline via light-dark(). Raw colour literals appear ONLY in the ramp block below. Components consume --bt-* only — never a ramp variable, never a literal. Canonical theme attribute: data-theme (data-bt-theme is supported as an alias for the design runtime). Unset = follow the OS (color-scheme: light dark). ============================================================ */ :root { color-scheme: light dark; /* ---- ramps — the ONLY place raw colour appears ----------- */ --slate-50:#F5F8F9; --slate-100:#E9EEF1; --slate-200:#D2DAE0; --slate-300:#ADB9C2; --slate-400:#7C8F9C; --slate-500:#5C6E7A; --slate-600:#47555E; --slate-700:#333F47; --slate-800:#242D33; --slate-900:#161D22; --slate-950:#0D1216; --slate-1000:#090D10; --teal-50:#F0F9F9; --teal-100:#DAF1EF; --teal-200:#B6E2DF; --teal-300:#89D1CD; --teal-400:#57C1BA; --teal-500:#389E97; --teal-600:#2D8680; --teal-700:#226D68; --teal-800:#1A514E; --teal-900:#133937; --white:#FFFFFF; --ghost-white:#F8F8FF; /* pillar tints are ramp entries like everything else */ --pillar-software:#389E97; --pillar-web:#407883; /* was also --deep-teal — one name now */ --pillar-electronics:#C98A2E; --pillar-scripts:#5C7CB8; --green-400:#5CC194; --green-600:#1F7A56; --green-300:#7FD3AC; --amber-400:#FFC409; --amber-700:#8A6300; --red-400:#EB445A; --red-600:#B3253A; --red-300:#FF8494; /* translucent ramp steps (sticky header, scrims, veils) */ --white-92:rgba(255,255,255,.92); --white-04:rgba(255,255,255,.04); --white-06:rgba(255,255,255,.06); --white-08:rgba(255,255,255,.08); --white-09:rgba(255,255,255,.09); --white-12:rgba(255,255,255,.12); --white-10:rgba(255,255,255,.10); --white-14:rgba(255,255,255,.14); --white-16:rgba(255,255,255,.16); --white-24:rgba(255,255,255,.24); --white-28:rgba(255,255,255,.28); --white-30:rgba(255,255,255,.30); --slate-900-92:rgba(22,29,34,.92); --slate-950-82:rgba(13,18,22,.82); --slate-950-50:rgba(13,18,22,.50); --slate-400-18:rgba(124,143,156,.18); --shadow-ink-10:rgba(35,45,51,.10); --shadow-ink-44:rgba(0,0,0,.44); /* ---- ACCENT BLOCK — single accent: teal ----------------- Swapping this block is the whole of the odoo.basseltech.com theming delta. */ --bt-accent: var(--teal-500); /* fills, icons, borders, rings */ --bt-accent-fill: light-dark(var(--teal-700), var(--teal-500)); /* white label 6.08:1 / dark ink 5.86:1 */ --bt-accent-hover: light-dark(var(--teal-800), var(--teal-400)); /* one step past the fill; also a:hover */ --bt-accent-text: light-dark(var(--teal-700), var(--teal-400)); /* links & small text 6.08:1 / 8.68:1 */ --bt-accent-subtle: light-dark(var(--teal-50), var(--teal-900)); --bt-accent-border: light-dark(var(--teal-200), var(--teal-800)); --bt-accent-contrast: light-dark(var(--white), var(--slate-950)); --bt-accent-ink: var(--slate-950); /* label on --bt-accent, both themes */ /* ---- surfaces ------------------------------------------- */ --bt-bg: light-dark(var(--ghost-white), var(--slate-950)); --bt-surface: light-dark(var(--white), var(--slate-900)); --bt-surface-raised: light-dark(var(--white), var(--slate-800)); --bt-surface-sunken: light-dark(var(--slate-50), var(--slate-1000)); --bt-surface-inverse: var(--slate-800); --bt-surface-deep: var(--slate-950); --bt-header: light-dark(var(--white-92), var(--slate-900-92)); /* ---- text ----------------------------------------------- */ --bt-text: light-dark(var(--slate-800), var(--slate-100)); --bt-text-strong: light-dark(var(--slate-900), var(--white)); --bt-text-muted: light-dark(var(--slate-500), var(--slate-400)); --bt-text-faint: light-dark(var(--slate-400), var(--slate-500)); --bt-text-inverse: light-dark(var(--white), var(--slate-950)); /* ---- on inverse surfaces (constant across themes) ------- */ --bt-on-inverse: var(--slate-100); --bt-on-inverse-strong: var(--white); --bt-on-inverse-muted: var(--slate-300); --bt-on-inverse-faint: var(--slate-400); --bt-on-inverse-dim: var(--slate-500); --bt-on-inverse-accent: var(--teal-400); --bt-on-inverse-accent-bright: var(--teal-300); /* fills, then lines — the alpha scale used on inverse surfaces */ --bt-on-inverse-veil: var(--white-04); --bt-on-inverse-veil-2: var(--white-06); --bt-on-inverse-veil-3: var(--white-08); --bt-on-inverse-veil-4: var(--white-10); --bt-on-inverse-veil-5: var(--white-16); --bt-on-inverse-line: var(--white-09); --bt-on-inverse-line-2: var(--white-12); --bt-on-inverse-line-3: var(--white-14); --bt-on-inverse-line-4: var(--white-24); --bt-on-inverse-line-5: var(--white-28); --bt-on-inverse-line-6: var(--white-30); /* ---- lines, scrims, placeholders ------------------------ */ --bt-border: light-dark(var(--slate-200), var(--slate-800)); --bt-border-strong: light-dark(var(--slate-300), var(--slate-700)); --bt-focus: var(--teal-500); --bt-scrim: var(--slate-950-82); /* badge over a thumbnail */ --bt-scrim-modal: var(--slate-950-50); --bt-hatch: var(--slate-400-18); /* placeholder hatching */ /* ---- status --------------------------------------------- */ --bt-success: var(--green-400); --bt-success-text: light-dark(var(--green-600), var(--green-300)); --bt-warning: var(--amber-400); --bt-warning-text: light-dark(var(--amber-700), var(--amber-400)); --bt-danger: var(--red-400); --bt-danger-text: light-dark(var(--red-600), var(--red-300)); /* ---- pillar tints (wayfinding only, never text/buttons) -- */ --bt-pillar-software: var(--pillar-software); --bt-pillar-web: var(--pillar-web); --bt-pillar-electronics: var(--pillar-electronics); --bt-pillar-scripts: var(--pillar-scripts); /* ---- elevation — one theme-aware colour, four ramps ------ Shadows are not colours, so they cannot use light-dark() wholesale; the COLOUR inside them can, and the four steps are derived from it. */ --bt-shadow-color: light-dark(var(--shadow-ink-10), var(--shadow-ink-44)); --bt-shadow-xs: 0 1px 2px color-mix(in srgb, var(--bt-shadow-color) 60%, transparent); --bt-shadow-sm: 0 1px 3px color-mix(in srgb, var(--bt-shadow-color) 75%, transparent), 0 1px 2px color-mix(in srgb, var(--bt-shadow-color) 40%, transparent); --bt-shadow-md: 0 4px 12px color-mix(in srgb, var(--bt-shadow-color) 80%, transparent), 0 2px 4px color-mix(in srgb, var(--bt-shadow-color) 40%, transparent); --bt-shadow-lg: 0 12px 28px var(--bt-shadow-color), 0 4px 8px color-mix(in srgb, var(--bt-shadow-color) 50%, transparent); /* ---- shape, motion, type -------------------------------- */ --bt-radius-sm:6px; --bt-radius-md:10px; --bt-radius-lg:14px; --bt-radius-xl:20px; --bt-radius-full:9999px; --bt-motion-fast:120ms; --bt-motion-base:200ms; --bt-motion-slow:320ms; --bt-ease:cubic-bezier(.4,0,.2,1); --bt-ease-out:cubic-bezier(.16,1,.3,1); --bt-font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif; --bt-font-body:"Space Grotesk",system-ui,-apple-system,sans-serif; --bt-font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace; } /* Forcing a theme is now a one-line colour-scheme switch. */ [data-theme="light"], [data-bt-theme="light"] { color-scheme: light; } [data-theme="dark"], [data-bt-theme="dark"] { color-scheme: dark; }