/*
* Slab Brain Design System v1.0
* Master token + component stylesheet
*
* Usage in Python/Jinja2 apps:
* 1. Copy this file to your app's static/ directory
* 2. In base template:
* 3. Set palette + mode on :
*
* 4. Inject per-tenant accent override if set:
* {% if theme.accent_hex %}
*
* {% endif %}
* 5. Load fonts in :
* Customer-facing apps — Playfair Display + Inter
* Internal apps — Inter only
*
* Palettes: editorial (default) | earthy | architectural | midnight | obsidian | onyx
* Modes: light (default) | dark
*
* All component classes use the .sb- prefix to avoid conflicts
* with any existing CSS (Bootstrap, app-specific, etc.)
*/
/* ============================================================
GLOBAL TOKENS (structure — not color)
============================================================ */
:root {
/* Font stacks */
--font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
--font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', Consolas, monospace;
/* Display type scale (serif — customer-facing apps) */
--text-d-2xl: 72px;
--text-d-xl: 56px;
--text-d-lg: 40px;
--text-d-md: 32px;
--text-d-sm: 24px;
/* UI type scale (sans — all apps) */
--text-ui-xl: 20px;
--text-ui-lg: 16px;
--text-ui-md: 14px;
--text-ui-sm: 12px;
--text-ui-xs: 11px;
/* Spacing (4px base unit) */
--space-0: 0px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* Border radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;
/* Borders (reference --color-border which is set per palette) */
--border-hairline: 0.5px solid var(--color-border);
--border-standard: 1px solid var(--color-border);
--border-strong: 1px solid var(--color-border-strong);
--border-focus: 1.5px solid var(--color-accent);
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
--shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.03);
--shadow-lg: 0 8px 24px rgba(0,0,0,.08), 0 3px 6px rgba(0,0,0,.04);
--shadow-xl: 0 20px 60px rgba(0,0,0,.10), 0 8px 16px rgba(0,0,0,.05);
/* Transitions */
--t-fast: 0.10s ease;
--t-base: 0.15s ease;
--t-slow: 0.25s ease;
/* Z-index layers */
--z-base: 1;
--z-raised: 10;
--z-overlay: 100;
--z-modal: 200;
--z-toast: 300;
}
/* ============================================================
COLOR TOKENS — Palette 1: High-Contrast Editorial
============================================================ */
html[data-palette="editorial"][data-mode="light"],
html:not([data-palette])[data-mode="light"],
html:not([data-palette]):not([data-mode]) {
--color-bg: #FBF9F4;
--color-surface: #EDE7DA;
--color-surface-raised: #FFFFFF;
--color-border: #D4C9B8;
--color-border-strong: #A89880;
--color-text-primary: #14130F;
--color-text-secondary: #5C5851;
--color-text-tertiary: #8C8479;
--color-accent: #C9A84C;
--color-accent-subtle: rgba(201, 168, 76, 0.10);
--color-accent-text: #14130F;
--color-danger: #B85C38;
--color-danger-subtle: rgba(184, 92, 56, 0.08);
--color-success: #4A7C59;
--color-success-subtle: rgba(74, 124, 89, 0.08);
--color-warning: #A06B28;
--color-warning-subtle: rgba(160, 107, 40, 0.08);
--color-overlay: rgba(20, 19, 15, 0.50);
}
html[data-palette="editorial"][data-mode="dark"],
html:not([data-palette])[data-mode="dark"] {
--color-bg: #0F0E0B;
--color-surface: #1A1916;
--color-surface-raised: #242220;
--color-border: #2E2C28;
--color-border-strong: #4A4840;
--color-text-primary: #F0EDE6;
--color-text-secondary: #9A9288;
--color-text-tertiary: #6A6460;
--color-accent: #D4B054;
--color-accent-subtle: rgba(212, 176, 84, 0.12);
--color-accent-text: #0F0E0B;
--color-danger: #D4735A;
--color-danger-subtle: rgba(212, 115, 90, 0.10);
--color-success: #5E9E72;
--color-success-subtle: rgba(94, 158, 114, 0.10);
--color-warning: #C28840;
--color-warning-subtle: rgba(194, 136, 64, 0.10);
--color-overlay: rgba(0, 0, 0, 0.65);
}
/* ============================================================
COLOR TOKENS — Palette 2: Warm & Earthy
============================================================ */
html[data-palette="earthy"][data-mode="light"] {
--color-bg: #F4EFE8;
--color-surface: #E6DDCF;
--color-surface-raised: #F9F6F1;
--color-border: #CEC0AA;
--color-border-strong: #A08868;
--color-text-primary: #2E2823;
--color-text-secondary: #7A6B55;
--color-text-tertiary: #A0907A;
--color-accent: #B89B6E;
--color-accent-subtle: rgba(184, 155, 110, 0.12);
--color-accent-text: #FFFFFF;
--color-danger: #9E4A30;
--color-danger-subtle: rgba(158, 74, 48, 0.08);
--color-success: #4A7250;
--color-success-subtle: rgba(74, 114, 80, 0.08);
--color-warning: #8A6020;
--color-warning-subtle: rgba(138, 96, 32, 0.08);
--color-overlay: rgba(46, 40, 35, 0.50);
}
html[data-palette="earthy"][data-mode="dark"] {
--color-bg: #19160F;
--color-surface: #231F17;
--color-surface-raised: #2E2820;
--color-border: #3A3428;
--color-border-strong: #5C5040;
--color-text-primary: #EEE8DF;
--color-text-secondary: #9A8B78;
--color-text-tertiary: #6B5F50;
--color-accent: #CDB080;
--color-accent-subtle: rgba(205, 176, 128, 0.12);
--color-accent-text: #19160F;
--color-danger: #C46848;
--color-danger-subtle: rgba(196, 104, 72, 0.10);
--color-success: #5C9068;
--color-success-subtle: rgba(92, 144, 104, 0.10);
--color-warning: #B8842C;
--color-warning-subtle: rgba(184, 132, 44, 0.10);
--color-overlay: rgba(0, 0, 0, 0.65);
}
/* ============================================================
COLOR TOKENS — Palette 3: Cool & Architectural
============================================================ */
html[data-palette="architectural"][data-mode="light"] {
--color-bg: #F2F4F5;
--color-surface: #DDE2E5;
--color-surface-raised: #FFFFFF;
--color-border: #C2CBD0;
--color-border-strong: #8A9BA4;
--color-text-primary: #1C2127;
--color-text-secondary: #5A6B74;
--color-text-tertiary: #8A9BA4;
--color-accent: #4A5560;
--color-accent-subtle: rgba(74, 85, 96, 0.08);
--color-accent-text: #FFFFFF;
--color-danger: #9E3A38;
--color-danger-subtle: rgba(158, 58, 56, 0.08);
--color-success: #3A7052;
--color-success-subtle: rgba(58, 112, 82, 0.08);
--color-warning: #8A6030;
--color-warning-subtle: rgba(138, 96, 48, 0.08);
--color-overlay: rgba(28, 33, 39, 0.50);
}
html[data-palette="architectural"][data-mode="dark"] {
--color-bg: #0E1114;
--color-surface: #181C20;
--color-surface-raised: #22272C;
--color-border: #2C333A;
--color-border-strong: #445058;
--color-text-primary: #E0E6EA;
--color-text-secondary: #6E828A;
--color-text-tertiary: #4E606A;
--color-accent: #7A96A8;
--color-accent-subtle: rgba(122, 150, 168, 0.12);
--color-accent-text: #0E1114;
--color-danger: #C45A58;
--color-danger-subtle: rgba(196, 90, 88, 0.10);
--color-success: #4E9068;
--color-success-subtle: rgba(78, 144, 104, 0.10);
--color-warning: #B8883A;
--color-warning-subtle: rgba(184, 136, 58, 0.10);
--color-overlay: rgba(0, 0, 0, 0.65);
}
/* ============================================================
COLOR TOKENS — Palette 4: Deep Navy Luxury
Eye comfort: bg #090C1A (warm-blue near-black, not pure #000);
text #D8DEF0 (~15:1 contrast, off-white prevents harsh glare).
============================================================ */
html[data-palette="midnight"][data-mode="light"] {
--color-bg: #F0F3FA;
--color-surface: #DDE4F2;
--color-surface-raised: #FFFFFF;
--color-border: #C0CBE8;
--color-border-strong: #7E96C8;
--color-text-primary: #0A102E;
--color-text-secondary: #445080;
--color-text-tertiary: #7888A8;
--color-accent: #C9A84C;
--color-accent-subtle: rgba(201, 168, 76, 0.10);
--color-accent-text: #0A102E;
--color-danger: #C44A48;
--color-danger-subtle: rgba(196, 74, 72, 0.10);
--color-success: #3A7A58;
--color-success-subtle: rgba(58, 122, 88, 0.10);
--color-warning: #A87830;
--color-warning-subtle: rgba(168, 120, 48, 0.10);
--color-overlay: rgba(10, 16, 46, 0.55);
}
html[data-palette="midnight"][data-mode="dark"] {
--color-bg: #090C1A;
--color-surface: #121628;
--color-surface-raised: #1B2038;
--color-border: #253060;
--color-border-strong: #3C4C88;
--color-text-primary: #D8DEF0;
--color-text-secondary: #7888B8;
--color-text-tertiary: #485878;
--color-accent: #D4B054;
--color-accent-subtle: rgba(212, 176, 84, 0.12);
--color-accent-text: #090C1A;
--color-danger: #D46868;
--color-danger-subtle: rgba(212, 104, 104, 0.12);
--color-success: #5AAE78;
--color-success-subtle: rgba(90, 174, 120, 0.12);
--color-warning: #CCA050;
--color-warning-subtle: rgba(204, 160, 80, 0.12);
--color-overlay: rgba(0, 0, 0, 0.75);
}
/* ============================================================
COLOR TOKENS — Palette 5: Volcanic Earth
Eye comfort: bg #0C0F0D (warm green-tinted near-black);
text #E0EDE0 (~15:1 contrast, green warmth reduces blue-light fatigue).
============================================================ */
html[data-palette="obsidian"][data-mode="light"] {
--color-bg: #F1F5F0;
--color-surface: #E0EADE;
--color-surface-raised: #FAFCF9;
--color-border: #C2D2BD;
--color-border-strong: #86A882;
--color-text-primary: #121A10;
--color-text-secondary: #456040;
--color-text-tertiary: #789278;
--color-accent: #2D7A4F;
--color-accent-subtle: rgba(45, 122, 79, 0.10);
--color-accent-text: #FFFFFF;
--color-danger: #C44A48;
--color-danger-subtle: rgba(196, 74, 72, 0.10);
--color-success: #3A8858;
--color-success-subtle: rgba(58, 136, 88, 0.10);
--color-warning: #A87830;
--color-warning-subtle: rgba(168, 120, 48, 0.10);
--color-overlay: rgba(0, 0, 0, 0.65);
}
html[data-palette="obsidian"][data-mode="dark"] {
--color-bg: #0C0F0D;
--color-surface: #141C15;
--color-surface-raised: #1D2A1F;
--color-border: #263A28;
--color-border-strong: #3D5A40;
--color-text-primary: #E0EDE0;
--color-text-secondary: #7CA082;
--color-text-tertiary: #4E6852;
--color-accent: #5AC87A;
--color-accent-subtle: rgba(90, 200, 122, 0.12);
--color-accent-text: #0C0F0D;
--color-danger: #D46868;
--color-danger-subtle: rgba(212, 104, 104, 0.12);
--color-success: #5AAE78;
--color-success-subtle: rgba(90, 174, 120, 0.12);
--color-warning: #CCA050;
--color-warning-subtle: rgba(204, 160, 80, 0.12);
--color-overlay: rgba(0, 0, 0, 0.80);
}
/* ============================================================
COLOR TOKENS — Palette 6: Museum Gallery
Eye comfort: bg #121212 (pure-neutral off-black, not #000 — avoids OLED
halation); text #E8E8E6 (~15:1 contrast, warm micro-tint prevents cold glare).
============================================================ */
html[data-palette="onyx"][data-mode="light"] {
--color-bg: #FAFAFA;
--color-surface: #F0F0EE;
--color-surface-raised: #FFFFFF;
--color-border: #DCDCDA;
--color-border-strong: #ABABAA;
--color-text-primary: #111110;
--color-text-secondary: #6A6A68;
--color-text-tertiary: #9A9A98;
--color-accent: #3A3A38;
--color-accent-subtle: rgba(58, 58, 56, 0.08);
--color-accent-text: #FAFAFA;
--color-danger: #C84040;
--color-danger-subtle: rgba(200, 64, 64, 0.10);
--color-success: #388050;
--color-success-subtle: rgba(56, 128, 80, 0.10);
--color-warning: #987030;
--color-warning-subtle: rgba(152, 112, 48, 0.10);
--color-overlay: rgba(0, 0, 0, 0.65);
}
html[data-palette="onyx"][data-mode="dark"] {
--color-bg: #121212;
--color-surface: #1C1C1C;
--color-surface-raised: #252525;
--color-border: #303030;
--color-border-strong: #484848;
--color-text-primary: #E8E8E6;
--color-text-secondary: #888886;
--color-text-tertiary: #5A5A58;
--color-accent: #E8E8E6;
--color-accent-subtle: rgba(232, 232, 230, 0.10);
--color-accent-text: #121212;
--color-danger: #D46868;
--color-danger-subtle: rgba(212, 104, 104, 0.12);
--color-success: #5AAE78;
--color-success-subtle: rgba(90, 174, 120, 0.12);
--color-warning: #CCA050;
--color-warning-subtle: rgba(204, 160, 80, 0.12);
--color-overlay: rgba(0, 0, 0, 0.80);
}
/* ============================================================
BASE RESET
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--font-ui);
font-size: var(--text-ui-lg);
font-weight: 400;
line-height: 1.55;
color: var(--color-text-primary);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; color: inherit; }
/* ============================================================
TYPOGRAPHY UTILITIES
============================================================ */
.sb-display-2xl { font-family: var(--font-display); font-size: var(--text-d-2xl); font-weight: 400; line-height: 1.00; letter-spacing: -0.02em; }
.sb-display-xl { font-family: var(--font-display); font-size: var(--text-d-xl); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
.sb-display-lg { font-family: var(--font-display); font-size: var(--text-d-lg); font-weight: 400; line-height: 1.10; letter-spacing: -0.01em; }
.sb-display-md { font-family: var(--font-display); font-size: var(--text-d-md); font-weight: 400; line-height: 1.20; }
.sb-display-sm { font-family: var(--font-display); font-size: var(--text-d-sm); font-weight: 400; line-height: 1.30; }
.sb-text-xl { font-size: var(--text-ui-xl); line-height: 1.40; }
.sb-text-lg { font-size: var(--text-ui-lg); line-height: 1.55; }
.sb-text-md { font-size: var(--text-ui-md); line-height: 1.50; }
.sb-text-sm { font-size: var(--text-ui-sm); line-height: 1.40; letter-spacing: 0.02em; }
.sb-text-xs { font-size: var(--text-ui-xs); line-height: 1.40; letter-spacing: 0.04em; }
/* All-caps label — for short functional UI labels only (under 4 words) */
.sb-label {
font-family: var(--font-ui);
font-size: var(--text-ui-xs);
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--color-text-secondary);
}
/* Color utilities */
.sb-c-primary { color: var(--color-text-primary); }
.sb-c-secondary { color: var(--color-text-secondary); }
.sb-c-tertiary { color: var(--color-text-tertiary); }
.sb-c-accent { color: var(--color-accent); }
.sb-c-danger { color: var(--color-danger); }
.sb-c-success { color: var(--color-success); }
/* ============================================================
LAYOUT
============================================================ */
.sb-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-6); }
.sb-container-narrow { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--space-6); }
.sb-divider { border: none; border-top: var(--border-hairline); }
/* ============================================================
BUTTONS
============================================================ */
.sb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 40px;
padding: 0 var(--space-4);
border-radius: var(--radius-md);
font-family: var(--font-ui);
font-size: var(--text-ui-md);
font-weight: 500;
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: opacity var(--t-base), transform var(--t-fast), background var(--t-base);
}
.sb-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.sb-btn:active:not(:disabled) { transform: translateY(1px); }
.sb-btn-primary { background: var(--color-accent); color: var(--color-accent-text); border: none; }
.sb-btn-secondary { background: transparent; color: var(--color-text-primary); border: var(--border-standard); }
.sb-btn-ghost { background: transparent; color: var(--color-text-secondary); border: none; }
.sb-btn-danger { background: var(--color-danger); color: #fff; border: none; }
.sb-btn-primary:hover:not(:disabled),
.sb-btn-danger:hover:not(:disabled) { opacity: 0.88; }
.sb-btn-secondary:hover:not(:disabled) { background: var(--color-surface); }
.sb-btn-ghost:hover:not(:disabled) { color: var(--color-text-primary); }
.sb-btn-sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-ui-sm); }
.sb-btn-lg { height: 48px; padding: 0 var(--space-6); font-size: var(--text-ui-lg); }
.sb-btn-xl { height: 56px; padding: 0 var(--space-8); font-size: var(--text-ui-lg); }
.sb-btn-pill { border-radius: var(--radius-full); }
/* ============================================================
FORM FIELDS
============================================================ */
.sb-field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.sb-field-label {
font-size: var(--text-ui-sm);
font-weight: 500;
color: var(--color-text-secondary);
letter-spacing: 0.02em;
}
.sb-input,
.sb-textarea,
.sb-select {
width: 100%;
padding: 0 var(--space-4);
height: 44px;
background: var(--color-surface-raised);
border: var(--border-standard);
border-radius: var(--radius-md);
font-family: var(--font-ui);
font-size: var(--text-ui-lg);
font-weight: 400;
color: var(--color-text-primary);
transition: border-color var(--t-base);
}
.sb-input:focus,
.sb-textarea:focus,
.sb-select:focus { outline: none; border: var(--border-focus); }
.sb-input::placeholder,
.sb-textarea::placeholder { color: var(--color-text-tertiary); }
.sb-input--error,
.sb-textarea--error { border-color: var(--color-danger); }
.sb-textarea { height: auto; min-height: 100px; padding: var(--space-3) var(--space-4); resize: vertical; }
.sb-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='%238C8479' d='M6 7L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-4) center;
padding-right: var(--space-10);
cursor: pointer;
}
.sb-field-error { font-size: var(--text-ui-sm); color: var(--color-danger); }
.sb-field-hint { font-size: var(--text-ui-sm); color: var(--color-text-tertiary); }
/* ============================================================
CARDS
============================================================ */
.sb-card {
background: var(--color-surface);
border: var(--border-hairline);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
}
.sb-card-raised {
background: var(--color-surface-raised);
box-shadow: var(--shadow-md);
}
/* Product card (inventory) */
.sb-product-card {
background: var(--color-surface);
border: var(--border-hairline);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
transition: box-shadow var(--t-slow), transform var(--t-slow);
}
.sb-product-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.sb-product-card__img-wrap {
overflow: hidden;
aspect-ratio: 4/3;
background: var(--color-surface-raised);
}
.sb-product-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-slow);
}
.sb-product-card:hover .sb-product-card__img { transform: scale(1.02); }
.sb-product-card__body { padding: var(--space-4) var(--space-5); }
.sb-product-card__type {
font-family: var(--font-ui);
font-size: var(--text-ui-xs);
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--color-text-tertiary);
margin-bottom: var(--space-1);
}
.sb-product-card__name {
font-family: var(--font-display);
font-size: var(--text-d-sm);
font-weight: 400;
color: var(--color-text-primary);
line-height: 1.25;
margin-bottom: var(--space-3);
}
.sb-product-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
/* Product grid */
.sb-grid-products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
@media (max-width: 1023px) { .sb-grid-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .sb-grid-products { grid-template-columns: 1fr; } }
/* ============================================================
NAVIGATION (customer-facing apps)
============================================================ */
.sb-nav {
position: sticky;
top: 0;
z-index: var(--z-raised);
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--space-8);
background: color-mix(in srgb, var(--color-bg) 85%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: var(--border-hairline);
}
.sb-nav__brand {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
}
.sb-nav__logo { height: 40px; width: auto; object-fit: contain; }
.sb-nav__name {
font-family: var(--font-display);
font-size: 18px;
font-weight: 400;
color: var(--color-text-primary);
}
.sb-nav__links {
display: flex;
align-items: center;
gap: var(--space-6);
list-style: none;
}
.sb-nav__link {
font-family: var(--font-ui);
font-size: var(--text-ui-xs);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-secondary);
text-decoration: none;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: color var(--t-base), border-color var(--t-base);
}
.sb-nav__link:hover,
.sb-nav__link[aria-current="page"] {
color: var(--color-text-primary);
border-bottom-color: currentColor;
}
@media (max-width: 767px) {
.sb-nav { padding: 0 var(--space-4); height: 56px; }
.sb-nav__links { display: none; }
}
/* ============================================================
CHIPS / BADGES
============================================================ */
.sb-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 3px var(--space-2);
border-radius: var(--radius-sm);
font-family: var(--font-ui);
font-size: var(--text-ui-xs);
font-weight: 500;
letter-spacing: 0.03em;
line-height: 1;
white-space: nowrap;
}
.sb-chip-neutral { background: var(--color-surface); color: var(--color-text-secondary); border: var(--border-hairline); }
.sb-chip-accent { background: var(--color-accent-subtle); color: var(--color-accent); }
.sb-chip-success { background: var(--color-success-subtle); color: var(--color-success); }
.sb-chip-danger { background: var(--color-danger-subtle); color: var(--color-danger); }
.sb-chip-warning { background: var(--color-warning-subtle); color: var(--color-warning); }
/* ============================================================
TABLES
============================================================ */
.sb-table { width: 100%; border-collapse: collapse; font-size: var(--text-ui-md); }
.sb-table th {
font-size: var(--text-ui-xs);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-tertiary);
padding: var(--space-3) var(--space-4);
border-bottom: var(--border-standard);
text-align: left;
white-space: nowrap;
}
.sb-table td {
padding: var(--space-3) var(--space-4);
color: var(--color-text-primary);
border-bottom: var(--border-hairline);
vertical-align: middle;
}
.sb-table tr:last-child td { border-bottom: none; }
.sb-table tbody tr:hover td { background: var(--color-accent-subtle); }
.sb-table-num { font-variant-numeric: tabular-nums; text-align: right; }
/* ============================================================
MODAL
============================================================ */
.sb-modal-backdrop {
position: fixed;
inset: 0;
z-index: var(--z-modal);
background: var(--color-overlay);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
}
.sb-modal {
position: relative;
background: var(--color-surface-raised);
border: var(--border-hairline);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
max-width: 560px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
animation: sb-modal-in 0.20s ease-out;
}
.sb-modal-wide { max-width: 800px; }
@keyframes sb-modal-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.sb-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-6) var(--space-6) 0;
}
.sb-modal__title {
font-family: var(--font-display);
font-size: var(--text-d-sm);
font-weight: 400;
color: var(--color-text-primary);
}
.sb-modal__close {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
font-size: 20px;
line-height: 1;
color: var(--color-text-tertiary);
transition: color var(--t-base), background var(--t-base);
}
.sb-modal__close:hover { color: var(--color-text-primary); background: var(--color-surface); }
.sb-modal__body { padding: var(--space-6); }
.sb-modal__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
padding: 0 var(--space-6) var(--space-6);
}
@media (max-width: 639px) {
.sb-modal-backdrop { align-items: flex-end; padding: 0; }
.sb-modal {
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
max-width: 100%;
max-height: 85vh;
animation: sb-sheet-in 0.25s ease-out;
}
@keyframes sb-sheet-in {
from { opacity: 0; transform: translateY(48px); }
to { opacity: 1; transform: translateY(0); }
}
}
/* ============================================================
SKELETON LOADING
============================================================ */
.sb-skeleton {
background: linear-gradient(
90deg,
var(--color-surface) 25%,
var(--color-surface-raised) 50%,
var(--color-surface) 75%
);
background-size: 200% 100%;
border-radius: var(--radius-md);
animation: sb-shimmer 1.4s ease infinite;
}
@keyframes sb-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.sb-skeleton-text { height: 14px; margin-bottom: var(--space-2); border-radius: var(--radius-sm); }
.sb-skeleton-text--sm { width: 45%; }
.sb-skeleton-text--md { width: 70%; }
.sb-skeleton-text--full { width: 100%; }
.sb-skeleton-image { width: 100%; aspect-ratio: 4/3; }
/* ============================================================
SPINNER (for button / action loading states)
============================================================ */
.sb-spinner {
display: inline-block;
width: 16px;
height: 16px;
flex-shrink: 0;
border: 1.5px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: sb-spin 0.6s linear infinite;
}
@keyframes sb-spin { to { transform: rotate(360deg); } }
/* ============================================================
EMPTY STATE
============================================================ */
.sb-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-16) var(--space-8);
gap: var(--space-4);
}
.sb-empty__icon { font-size: 40px; color: var(--color-text-tertiary); line-height: 1; }
.sb-empty__title { font-family: var(--font-display); font-size: var(--text-d-sm); font-weight: 400; color: var(--color-text-primary); }
.sb-empty__body { font-size: var(--text-ui-md); color: var(--color-text-secondary); max-width: 360px; }
/* Internal apps use sans for empty state title */
.sb-empty--internal .sb-empty__title {
font-family: var(--font-ui);
font-size: 18px;
font-weight: 500;
}
/* ============================================================
ERROR BANNER
============================================================ */
.sb-error-banner {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
background: var(--color-danger-subtle);
border: 1px solid var(--color-danger);
border-radius: var(--radius-lg);
font-size: var(--text-ui-md);
color: var(--color-danger);
}
/* ============================================================
FOCUS RING (accessibility)
============================================================ */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }