/* Blossom Warehouse OS — V1 design tokens Drop-in CSS custom properties. Dark is the default; add data-theme="light" on to switch. Both themes drive the same components — only these values change. Values are lifted verbatim from the V1 design file. */ :root, [data-theme="dark"] { /* Surfaces */ --bk-bg-canvas: #0E1310; --bk-bg-panel: #151B16; --bk-bg-raised: #1C231D; --bk-rule: #2A332B; --bk-rule-strong: #3A453B; /* Type */ --bk-text: #F2F5F0; --bk-text-secondary: #DDE4DB; --bk-text-dim: #A7B3A6; --bk-text-mute: #778176; --bk-text-faint: #5F6B5F; --bk-text-disabled: #4A554B; /* Action — one filled primary per screen. Never text, border, or status. */ --bk-action: #8ADE4B; --bk-action-ink: #0E1310; /* Complete */ --bk-success: #8ADE4B; --bk-success-text: #8ADE4B; --bk-success-dim: #5E9A63; --bk-success-tint: #16261B; --bk-success-tint-2: #1B3A22; --bk-success-border: #2E6B36; /* Short / attention */ --bk-warning: #F0A500; --bk-warning-border: #E8A33D; --bk-warning-dim: #C9922F; --bk-warning-tint: #2A2110; --bk-warning-rule: #7A5D18; /* Problem / late */ --bk-danger: #E03B28; --bk-danger-text: #FF8D80; --bk-danger-dim: #E8837A; --bk-danger-tint: #2A1512; --bk-danger-border: #7A3229; /* Active / packing / cold */ --bk-info: #3D8FD0; --bk-info-text: #8FC8EE; --bk-info-dim: #6FA9D4; --bk-info-tint: #12222E; /* Supervisor override — identical in both themes by design */ --bk-override: #D9A300; --bk-override-text: #FFD84A; --bk-override-dim: #C9A83C; --bk-override-tint: #241D05; /* Packing chrome (D5) */ --bk-pack-bg: #101A21; --bk-pack-rule: #21323D; --bk-pack-rule-2: #2F4959; --bk-pack-text: #DDE9F0; --bk-pack-dim: #9DB3C0; --bk-pack-mute: #7A8F9C; --bk-pack-disabled: #3F5361; /* Scrollbar */ --bk-scroll-track: #0E1310; --bk-scroll-thumb: #3E5A3F; } [data-theme="light"] { --bk-bg-canvas: #EEECE5; --bk-bg-panel: #F7F6F1; --bk-bg-raised: #FFFFFF; --bk-rule: #DDD9CC; --bk-rule-strong: #C8C5B8; --bk-text: #14180F; --bk-text-secondary: #3F4636; --bk-text-dim: #5D6553; --bk-text-mute: #9AA392; --bk-text-faint: #9AA392; --bk-text-disabled: #C8C5B8; --bk-action: #8ADE4B; --bk-action-ink: #14180F; --bk-success: #3F6B25; --bk-success-text: #2F5A1C; --bk-success-dim: #3F6B25; --bk-success-tint: #EFF7E6; --bk-success-tint-2: #EFF7E6; --bk-success-border: #3F6B25; --bk-warning: #B06A00; --bk-warning-border: #B06A00; --bk-warning-dim: #8A6100; --bk-warning-tint: #FDF6E6; --bk-warning-rule: #D8B46A; --bk-danger: #A3231B; --bk-danger-text: #A3231B; --bk-danger-dim: #A3231B; --bk-danger-tint: #FBEEEC; --bk-danger-border: #E4BDB8; --bk-info: #1A5C8F; --bk-info-text: #134668; --bk-info-dim: #1A5C8F; --bk-info-tint: #DCEAF5; --bk-override: #D9A300; --bk-override-text: #FFD84A; --bk-override-dim: #C9A83C; --bk-override-tint: #241D05; --bk-pack-bg: #ECEFF2; --bk-pack-rule: #DDE3E7; --bk-pack-rule-2: #CDD5DA; --bk-pack-text: #0F1519; --bk-pack-dim: #5D6870; --bk-pack-mute: #7C8992; --bk-pack-disabled: #9AA7AE; --bk-scroll-track: #E6E3DA; --bk-scroll-thumb: #1D4B34; /* Light-mode only: dark green carries structure (nav rail, brand) */ --bk-structure: #1D4B34; --bk-structure-rule: #3F6E53; --bk-structure-dim: #6E9280; --bk-structure-text: #A8C5B4; } :root { /* Type */ --bk-font-sans: "Public Sans", Helvetica, Arial, sans-serif; --bk-font-mono: "DM Mono", ui-monospace, Menlo, monospace; --bk-type-quantity: 900 118px/0.95 var(--bk-font-sans); /* 118–210, tracking -.05em */ --bk-type-display: 900 54px/1 var(--bk-font-sans); /* 40–62, tracking -.03em */ --bk-type-title: 700 32px/1.1 var(--bk-font-sans); /* 26–34 */ --bk-type-translation: 500 30px/1.1 var(--bk-font-sans); /* ~55% of the English size */ --bk-type-action: 900 30px/1 var(--bk-font-sans); /* 24–46 primary */ --bk-type-action-sm: 800 15px/1 var(--bk-font-sans); /* 14–17 secondary */ --bk-type-body: 600 18px/1.4 var(--bk-font-sans); /* 17–28 */ --bk-type-label: 500 13px/1 var(--bk-font-mono); /* 11–13, tracking .09–.15em, UPPERCASE */ --bk-type-meta: 500 12px/1 var(--bk-font-mono); /* 10–12 — the floor of the system */ /* Spacing — 4px base */ --bk-space-1: 4px; --bk-space-2: 8px; --bk-space-3: 12px; --bk-space-4: 14px; --bk-space-5: 18px; --bk-space-6: 22px; --bk-space-7: 26px; --bk-space-8: 34px; /* Touch targets — see README §Touch */ --bk-touch-min: 44px; /* absolute floor */ --bk-touch-tertiary: 62px; --bk-touch-nav: 84px; --bk-touch-secondary: 100px; --bk-touch-stepper: 132px; --bk-touch-primary: 112px; /* 112–148 */ /* Structure */ --bk-rail-width: 84px; --bk-header-height: 56px; /* 52 on tablet + phone */ --bk-statusbar-height: 40px; --bk-radius: 0; /* weight comes from 1–3px borders, not corners */ } /* Blossom scrollbar contract. The platform deliberately does NOT use thin or hover-only overlay scrollbars. Chromium/WebKit receives an explicit 28px track everywhere, with 32px on the primary application viewport. The thumb remains visibly present at rest and keeps a large physical grab target. */ * { scrollbar-width: auto; scrollbar-color: var(--bk-scroll-thumb) var(--bk-scroll-track); } *::-webkit-scrollbar { width: 28px; height: 22px; } *::-webkit-scrollbar-track { background: var(--bk-scroll-track); box-shadow: inset 0 0 0 1px var(--bk-rule); } *::-webkit-scrollbar-thumb { background: var(--bk-scroll-thumb); border: 2px solid var(--bk-scroll-track); min-height: 72px; min-width: 72px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bk-scroll-thumb) 72%, var(--bk-text)); } *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--bk-scroll-thumb) 72%, var(--bk-action)); } *::-webkit-scrollbar-thumb:active { background: var(--bk-action); } *::-webkit-scrollbar-button { width: 0; height: 0; display: none; } *::-webkit-scrollbar-corner { background: var(--bk-scroll-track); } .bk-scroll::-webkit-scrollbar { width: 32px; height: 24px; } .bk-scroll::-webkit-scrollbar-track { background: var(--bk-scroll-track); box-shadow: inset 0 0 0 1px var(--bk-rule); } .bk-scroll::-webkit-scrollbar-thumb { background: var(--bk-scroll-thumb); border: 2px solid var(--bk-scroll-track); min-height: 84px; } .bk-scroll { scrollbar-width: auto; scrollbar-color: var(--bk-scroll-thumb) var(--bk-scroll-track); } /* ======================================================================== OFFICE / BACK OFFICE SURFACE Merged from the August 23, 2026 Office designer handoff. These are scoped to the Office surface so Warehouse retains its larger touch-first scale. ======================================================================== */ [data-surface="office"] { --bk-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif; --bk-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --bk-font-serif: Georgia, "Times New Roman", serif; --bk-office-nav-width: 172px; --bk-office-header-height: 52px; --bk-office-row-height: 36px; --bk-office-product-row-height: 46px; --bk-office-panel-gap: 12px; --bk-office-aside-width: 430px; } [data-surface="office"][data-theme="light"], [data-surface="office"][data-bk-theme="light"] { --bk-bg: #F4F1E8; --bk-surface: #FFFEFA; --bk-surface-2: #EDE9DD; --bk-surface-3: #E4DFD0; --bk-ink: #141E18; --bk-ink-2: #4B5850; --bk-ink-3: #7C887F; --bk-line: #D9D3C3; --bk-line-strong: #B7AF9B; --bk-nav: #0D2A1B; --bk-nav-ink: #E7EFE3; --bk-nav-ink-2: #8FA997; --bk-nav-line: #1E4530; --bk-green: #14663B; --bk-green-soft: #E2EEE4; --bk-lime: #5FAE12; --bk-lime-ink: #417C08; --bk-lime-soft: #ECF6D9; --bk-blue: #1B5FA6; --bk-blue-soft: #E2ECF7; --bk-amber: #8F5A05; --bk-amber-soft: #FAEFD6; --bk-red: #A31F14; --bk-red-soft: #FAE4E1; --bk-sel: #DCEADA; --bk-hover: #EAE6D9; } [data-surface="office"][data-theme="dark"], [data-surface="office"][data-bk-theme="dark"] { --bk-bg: #08120C; --bk-surface: #0E1D14; --bk-surface-2: #142719; --bk-surface-3: #1B3322; --bk-ink: #EEF3E9; --bk-ink-2: #A6B9AB; --bk-ink-3: #6F8477; --bk-line: #22382A; --bk-line-strong: #375340; --bk-nav: #040B07; --bk-nav-ink: #DEEAD9; --bk-nav-ink-2: #7C9484; --bk-nav-line: #1A3122; --bk-green: #3E9A5E; --bk-green-soft: #11301E; --bk-lime: #8FDB2A; --bk-lime-ink: #A6E84B; --bk-lime-soft: #1A2E0F; --bk-blue: #74AAE2; --bk-blue-soft: #102438; --bk-amber: #E0A63F; --bk-amber-soft: #31240B; --bk-red: #EE6E5D; --bk-red-soft: #361511; --bk-sel: #193623; --bk-hover: #152A1B; } /* Office semantic tones. A component chooses a semantic tone; it never picks a custom per-badge color. */ [data-surface="office"] [data-tone] { border-color: currentColor; } [data-surface="office"] [data-tone="ok"] { color: var(--bk-green); background: var(--bk-green-soft); } [data-surface="office"] [data-tone="lime"] { color: var(--bk-lime-ink); background: var(--bk-lime-soft); } [data-surface="office"] [data-tone="blue"] { color: var(--bk-blue); background: var(--bk-blue-soft); } [data-surface="office"] [data-tone="amber"] { color: var(--bk-amber); background: var(--bk-amber-soft); } [data-surface="office"] [data-tone="red"] { color: var(--bk-red); background: var(--bk-red-soft); } [data-surface="office"] [data-tone="mute"] { color: var(--bk-ink-3); background: var(--bk-surface-2); } [data-surface="office"] [data-tone="ink"] { color: var(--bk-surface); background: var(--bk-ink); } /* Shared density guards from the Office handoff. These are intentionally structural rather than cosmetic. */ [data-cell] { overflow: hidden; min-width: 0; } [data-cell] > span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-nowrap] td, [data-nowrap] th { white-space: nowrap; } [data-row] { overflow: hidden; } [data-row] > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-bk-lang="en"] [data-es], [data-lang="en"] [data-es] { display: none !important; } [data-bk-lang="es"] [data-en], [data-lang="es"] [data-en] { display: none !important; }