/* Belbotika design system — tokens * * One name per decision, three themes. Page CSS never writes a raw colour or a * raw pixel size; it reads these. That is what keeps the platform consistent * while areas are redesigned one at a time. * * Themes come from the customer's profile (default / dark / light) and are * stamped on as data-bel-theme. Every token is defined on :root first, * so a page still renders correctly if the attribute is missing. * * Prefix: --bel-*. Nothing here touches Bootstrap's variables, so the old and * the new UI can sit side by side until the migration finishes. */ :root { /* ---- brand primitives (fixed across themes) ---------------------------- */ --bel-indigo-50: #EFEDFF; --bel-indigo-100: #DCD8FF; --bel-indigo-300: #A79EFF; --bel-indigo-500: #4B3DF5; /* brand */ --bel-indigo-600: #3B2FD4; --bel-indigo-700: #2E24A8; --bel-orange-500: #FF6B2C; --bel-pink-400: #FF8CC6; --bel-cream-200: #FFE9C9; --bel-ink-900: #121110; --bel-ink-700: #3A3733; --bel-ink-500: #6B6660; --bel-ink-300: #ABA59B; --bel-sand-100: #F7F5F0; /* warm page ground */ --bel-sand-200: #EDE9E1; --bel-white: #FFFFFF; --bel-green-500: #12855B; --bel-amber-500: #B25E00; --bel-red-500: #C62B2B; /* ---- type ------------------------------------------------------------- */ --bel-font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --bel-font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; /* Numbers in stat tiles, counts and prices. The italic serif made 13 read as B and 1 as l, so figures use the sans with even-width digits (review 2026-09-25). */ --bel-font-figures: var(--bel-font-sans); --bel-figures-weight: 500; --bel-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* Fluid sizes: phone first, growing to desktop without breakpoints. */ --bel-text-xs: 0.75rem; --bel-text-sm: 0.875rem; --bel-text-base: 1rem; --bel-text-lg: 1.125rem; --bel-text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --bel-text-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem); --bel-text-3xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem); --bel-text-4xl: clamp(2.25rem, 1.5rem + 3.6vw, 4rem); --bel-leading-tight: 1.15; --bel-leading-snug: 1.35; --bel-leading-normal: 1.6; --bel-tracking-tight: -0.02em; --bel-weight-regular: 400; --bel-weight-medium: 500; --bel-weight-semibold: 600; /* ---- space (4px base) -------------------------------------------------- */ --bel-space-1: 0.25rem; --bel-space-2: 0.5rem; --bel-space-3: 0.75rem; --bel-space-4: 1rem; --bel-space-5: 1.25rem; --bel-space-6: 1.5rem; --bel-space-8: 2rem; --bel-space-10: 2.5rem; --bel-space-12: 3rem; --bel-space-16: 4rem; --bel-space-20: 5rem; --bel-gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem); /* ---- shape ------------------------------------------------------------- */ --bel-radius-sm: 8px; --bel-radius-md: 12px; --bel-radius-lg: 18px; --bel-radius-xl: 28px; --bel-radius-pill: 999px; --bel-border-width: 1px; /* ---- motion ------------------------------------------------------------ */ --bel-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --bel-duration-fast: 120ms; --bel-duration: 200ms; /* ---- layout ------------------------------------------------------------ */ --bel-container: 1200px; --bel-container-narrow: 760px; --bel-rail-width: 264px; --bel-header-height: 60px; --bel-tap-target: 44px; /* never smaller: thumbs, not cursors */ --bel-z-header: 100; --bel-z-rail: 110; --bel-z-overlay: 200; --bel-z-modal: 210; --bel-z-toast: 300; /* ---- semantic: default theme (warm) ------------------------------------ */ --bel-brand: var(--bel-indigo-500); --bel-brand-strong: var(--bel-indigo-600); --bel-brand-soft: var(--bel-indigo-50); --bel-on-brand: var(--bel-white); --bel-accent: var(--bel-orange-500); --bel-accent-soft: var(--bel-cream-200); --bel-bg: var(--bel-sand-100); /* Cards a touch warm, not pure white: on the sand page pure white read as one big white sheet (owner trial, 2026-09-25). Was var(--bel-white). */ --bel-bg-raised: #FCFBF8; --bel-bg-sunken: var(--bel-sand-200); --bel-bg-inverse: var(--bel-ink-900); --bel-surface-hover: rgba(18, 17, 16, 0.04); --bel-surface-selected: var(--bel-indigo-50); --bel-text: var(--bel-ink-900); /* Both moved one step down the scale 2026-09-18, because the lighter pair did not pass. --bel-text-subtle feeds --muted, which carries every hint, date and meta line in the product, and ink-300 on the warm page ground is 2.2:1 — well under the 4.5:1 floor for normal text. It is ink-500 now (5.2:1), and the step above it moves to ink-700 (10.9:1) so the three levels stay three levels. The dark theme already passed and is unchanged. */ --bel-text-muted: var(--bel-ink-700); --bel-text-subtle: var(--bel-ink-500); --bel-text-on-inverse: var(--bel-sand-100); --bel-link: var(--bel-indigo-600); --bel-border: rgba(18, 17, 16, 0.12); --bel-border-strong: rgba(18, 17, 16, 0.24); --bel-focus-ring: var(--bel-indigo-500); --bel-success: var(--bel-green-500); --bel-success-soft: #E4F5EC; --bel-warning: var(--bel-amber-500); --bel-warning-soft: #FDF0DC; --bel-danger: var(--bel-red-500); --bel-danger-soft: #FBE7E7; --bel-info: var(--bel-indigo-600); --bel-info-soft: var(--bel-indigo-50); --bel-shadow-sm: 0 1px 2px rgba(18, 17, 16, 0.06); --bel-shadow-md: 0 8px 24px rgba(18, 17, 16, 0.08); --bel-shadow-lg: 0 24px 60px rgba(18, 17, 16, 0.12); --bel-shadow-focus: 0 0 0 3px rgba(75, 61, 245, 0.28); } /* ---- dark theme ---------------------------------------------------------- */ :root[data-bel-theme='dark'] { --bel-brand: var(--bel-indigo-300); --bel-brand-strong: #BDB4FF; --bel-brand-soft: rgba(167, 158, 255, 0.16); --bel-on-brand: #17142B; --bel-accent: #FF8A50; --bel-accent-soft: rgba(255, 138, 80, 0.18); --bel-bg: #141311; --bel-bg-raised: #1D1B18; --bel-bg-sunken: #0E0D0C; --bel-bg-inverse: var(--bel-sand-100); --bel-surface-hover: rgba(247, 245, 240, 0.06); --bel-surface-selected: rgba(167, 158, 255, 0.16); --bel-text: #F4F1EC; --bel-text-muted: #B8B2A9; --bel-text-subtle: #8A847B; --bel-text-on-inverse: var(--bel-ink-900); --bel-link: #BDB4FF; --bel-border: rgba(247, 245, 240, 0.16); --bel-border-strong: rgba(247, 245, 240, 0.32); --bel-focus-ring: #BDB4FF; --bel-success: #4ADE9B; --bel-success-soft: rgba(74, 222, 155, 0.16); --bel-warning: #F5B451; --bel-warning-soft: rgba(245, 180, 81, 0.16); --bel-danger: #FF8080; --bel-danger-soft: rgba(255, 128, 128, 0.16); --bel-info: #BDB4FF; --bel-info-soft: rgba(167, 158, 255, 0.16); --bel-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --bel-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55); --bel-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6); --bel-shadow-focus: 0 0 0 3px rgba(189, 180, 255, 0.35); } /* ---- light theme (cool, plain white) ------------------------------------- */ :root[data-bel-theme='light'] { --bel-bg: var(--bel-white); --bel-bg-raised: var(--bel-white); --bel-bg-sunken: #F4F5F7; --bel-surface-hover: rgba(18, 17, 16, 0.045); --bel-accent-soft: #FFF1E3; --bel-border: rgba(18, 17, 16, 0.14); } /* Someone who asked the operating system for less motion gets less motion. */ @media (prefers-reduced-motion: reduce) { :root { --bel-duration-fast: 0ms; --bel-duration: 0ms; } } /* Studio, Conversations and sign-in stay exactly as filmed for Meta review #5. */ :root:not([data-bel-theme]) :is(.ss-wrap, .ib-wrap, body.auth), :root[data-bel-theme='default'] :is(.ss-wrap, .ib-wrap, body.auth) { --bel-bg-raised: var(--bel-white); --card: var(--bel-white); }