/* ========================================================================== StormXI Design Tokens — v1.0 The single source of truth. Import BEFORE bootstrap overrides. Theme switching: set data-theme="dark" | "light" on or . Prefix: --sx-* ========================================================================== */ /* -------------------------------------------------------------------------- 1. PRIMITIVES (theme-independent) -------------------------------------------------------------------------- */ :root { /* Typography */ --sx-font-ui: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif; --sx-font-data: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; /* Type scale (desktop reference 1920×1080) */ --sx-fs-micro: 10px; /* mono uppercase labels only */ --sx-fs-xs: 11px; --sx-fs-sm: 12px; --sx-fs-base: 13px; /* body default — dense UI */ --sx-fs-md: 14px; --sx-fs-lg: 16px; --sx-fs-xl: 20px; --sx-fs-2xl: 24px; --sx-fs-3xl: 32px; --sx-fs-display: 44px; --sx-lh-tight: 1.2; --sx-lh-base: 1.45; /* Mono label treatment (panel headers, table headers, nav sections) */ --sx-label-ls: 0.08em; /* letter-spacing, always uppercase */ /* Spacing — 8pt grid (4 permitted as half-step) */ --sx-sp-1: 4px; --sx-sp-2: 8px; --sx-sp-3: 12px; --sx-sp-4: 16px; --sx-sp-5: 24px; --sx-sp-6: 32px; --sx-sp-7: 48px; --sx-sp-8: 64px; /* Radius — sharp, technical */ --sx-radius-sm: 2px; /* chips, badges, inputs */ --sx-radius: 3px; /* panels, cards, buttons */ --sx-radius-lg: 6px; /* modals, spotlight panels */ --sx-radius-full: 999px; /* avatars, dots only */ /* Borders */ --sx-hairline: 1px; /* Layout */ --sx-shell-max: 1920px; --sx-header-h: 56px; --sx-sidebar-w: 224px; --sx-sidebar-w-collapsed: 64px; /* Z-index */ --sx-z-sticky: 100; --sx-z-dropdown: 400; --sx-z-modal: 800; --sx-z-toast: 900; --sx-z-tooltip: 1000; /* Motion */ --sx-ease: cubic-bezier(0.4, 0, 0.2, 1); --sx-dur-fast: 120ms; --sx-dur: 180ms; } /* -------------------------------------------------------------------------- 2. DARK THEME (primary experience) -------------------------------------------------------------------------- */ :root, [data-theme="dark"] { color-scheme: dark; /* Surfaces */ --sx-bg: #0C1015; /* app background */ --sx-bg-shell: #090C10; /* behind the centered shell on ultrawide */ --sx-surface: #13181F; /* panels / cards */ --sx-surface-2: #192029; /* panel headers, nested surfaces, hover rows */ --sx-surface-3: #212A33; /* active rows, pressed */ --sx-inset: #0A0E13; /* wells, charts, inputs */ /* Linework */ --sx-border: #28303A; /* hairline default */ --sx-border-strong: #39434E; /* emphasized frames, corner ticks */ --sx-divider: #1E252D; /* segmented dividers inside panels */ /* Text — never pure white */ --sx-text: #E3E8EC; --sx-text-2: #9CA7B2; --sx-text-3: #66717C; --sx-text-inverse: #13181F; /* Primary accent — industrial gold (aerospace marking, not luxury) */ --sx-gold: #BE9934; --sx-gold-hover: #CCAA4D; --sx-gold-active: #A98729; --sx-gold-subtle: rgba(190, 153, 52, 0.10); --sx-gold-border: rgba(190, 153, 52, 0.34); /* Secondary accent — radar teal (analytics, weather, positive telemetry) */ --sx-teal: #4C958D; --sx-teal-subtle: rgba(76, 149, 141, 0.10); /* Status — muted, never neon */ --sx-success: #5E8F6E; --sx-success-subtle: rgba(94, 143, 110, 0.12); --sx-warning: #BD893D; --sx-warning-subtle: rgba(189, 137, 61, 0.12); --sx-danger: #AD5953; --sx-danger-subtle: rgba(173, 89, 83, 0.12); --sx-info: #6E89A7; --sx-info-subtle: rgba(110, 137, 167, 0.12); /* Focus ring (keyboard) */ --sx-focus: 0 0 0 2px var(--sx-bg), 0 0 0 4px var(--sx-gold); /* Shadows — minimal; layers, not elevation */ --sx-shadow-panel: none; --sx-shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5); } /* -------------------------------------------------------------------------- 3. LIGHT THEME (same product, inverted hierarchy) -------------------------------------------------------------------------- */ [data-theme="light"] { color-scheme: light; /* Surfaces */ --sx-bg: #EEF1F4; --sx-bg-shell: #E6EAF0; --sx-surface: #FFFFFF; --sx-surface-2: #F5F7FA; --sx-surface-3: #EAEFF4; --sx-inset: #E7ECF1; /* Linework */ --sx-border: #D5DCE4; --sx-border-strong: #BEC7D1; --sx-divider: #E5EAF0; /* Text — never pure black */ --sx-text: #232B34; --sx-text-2: #5D6975; --sx-text-3: #98A4AF; --sx-text-inverse: #FFFFFF; /* Primary accent — industrial gold (darkened for light backgrounds) */ --sx-gold: #9E7D24; --sx-gold-hover: #8A6C1E; --sx-gold-active: #755B18; --sx-gold-subtle: rgba(158, 125, 36, 0.10); --sx-gold-border: rgba(158, 125, 36, 0.36); /* Secondary accent */ --sx-teal: #3A7E79; --sx-teal-subtle: rgba(58, 126, 121, 0.10); /* Status */ --sx-success: #487659; --sx-success-subtle: rgba(72, 118, 89, 0.10); --sx-warning: #96681F; --sx-warning-subtle: rgba(150, 104, 31, 0.10); --sx-danger: #984D48; --sx-danger-subtle: rgba(152, 77, 72, 0.10); --sx-info: #587395; --sx-info-subtle: rgba(88, 115, 149, 0.10); /* Focus ring (keyboard) */ --sx-focus: 0 0 0 2px var(--sx-bg), 0 0 0 4px var(--sx-gold); /* Shadows — minimal; layers, not elevation */ --sx-shadow-panel: none; --sx-shadow-overlay: 0 8px 24px rgba(24, 34, 48, 0.16); } /* -------------------------------------------------------------------------- 4. BASE RESET -------------------------------------------------------------------------- */ html, body { background: var(--sx-bg); color: var(--sx-text); font-family: var(--sx-font-ui); font-size: var(--sx-fs-base); line-height: var(--sx-lh-base); -webkit-font-smoothing: antialiased; } /* Numbers align in tables and tickers */ .sx-num, td.sx-num, .sx-data { font-family: var(--sx-font-data); font-variant-numeric: tabular-nums; } /* Mono uppercase micro-label — the system's signature type treatment */ .sx-label { font-family: var(--sx-font-data); font-size: var(--sx-fs-micro); font-weight: 500; letter-spacing: var(--sx-label-ls); text-transform: uppercase; color: var(--sx-text-3); } /* Hairline panel */ .sx-panel { background: var(--sx-surface); border: var(--sx-hairline) solid var(--sx-border); border-radius: var(--sx-radius); } /* Corner tick markers — apply to framed feature panels */ .sx-ticks { position: relative; } .sx-ticks::before, .sx-ticks::after { content: ""; position: absolute; width: 8px; height: 8px; border-color: var(--sx-border-strong); border-style: solid; } .sx-ticks::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; } .sx-ticks::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; } /* Internal-scroll region (app shell never scrolls) */ .sx-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--sx-border-strong) transparent; } .sx-scroll::-webkit-scrollbar { width: 8px; } .sx-scroll::-webkit-scrollbar-thumb { background: var(--sx-border-strong); border-radius: 4px; } /* Keyboard focus */ :focus-visible { outline: none; box-shadow: var(--sx-focus); } /* -------------------------------------------------------------------------- 5. BREAKPOINTS (reference — use in media queries) -------------------------------------------------------------------------- Desktop (reference) : ≥1600px — full sidebar, 12-col, max 1800px centered Laptop : 1200–1599px — sidebar collapses to icons (64px) Tablet : 768–1199px — simplified 8-col, panels reflow Mobile : <768px — NATIVE-APP redesign: bottom tab bar, stacked full-width panels, no sidebar -------------------------------------------------------------------------- */