/* TIGA OS — Cockpit design tokens. Active only when . Default-off keeps the pre-cockpit look untouched. Two themes: dark — default when cockpit is on light — [data-theme="light"] OR legacy body.theme-light (portal subdomains) */ /* ============================================================ COCKPIT · DARK ============================================================ */ html[data-cockpit="on"] { /* Legacy compat — these mirror the values already in styles.css :root so Phase 1 alone produces no visible change. Phase 2+ primitives carry the cockpit shift via the semantic tokens defined further down. Values are space-separated rgb so Tailwind's works. */ --c-dark: 10 16 24; --c-blue: 17 24 31; --c-mid: 26 34 44; --c-light: 92 143 181; --c-accent: 59 130 246; --bg-body: #0A1018; --text-main: #e2e8f0; --text-bright: #ffffff; --shadow-card: rgba(0,0,0,.5); --scrollbar-track: #0A1018; --scrollbar-thumb: #1A222C; --glow-accent: rgba(59,130,246,.35); --glow-success: rgba(52,211,153,.30); --glow-danger: rgba(248,113,113,.30); /* Semantic surfaces */ --surface-base: #0A1018; --surface-1: #11181F; --surface-2: #161F28; --surface-3: #1C2630; --surface-glass: rgba(255,255,255,.04); --surface-glass-strong: rgba(255,255,255,.06); --surface-overlay: rgba(10,16,24,.78); --surface-scrim: rgba(0,0,0,.55); /* Text */ --text-display: rgba(255,255,255,.96); --text-primary: rgba(255,255,255,.86); --text-secondary: rgba(255,255,255,.62); --text-muted: rgba(255,255,255,.42); --text-faint: rgba(255,255,255,.26); --text-on-accent: #FFFFFF; --text-on-light: #0F1015; /* Hairlines */ --hairline: rgba(255,255,255,.06); --hairline-strong: rgba(255,255,255,.10); --hairline-bright: rgba(255,255,255,.16); /* Status / accents */ --accent: #5DA3DC; --accent-soft: rgba(93,163,220,.15); --accent-glow: rgba(93,163,220,.35); --success: #34D399; --success-soft: rgba(52,211,153,.14); --warning: #F59E0B; --warning-soft: rgba(245,158,11,.16); --danger: #EF4444; --danger-soft: rgba(239,68,68,.14); --info: #60A5FA; --info-soft: rgba(96,165,250,.14); /* Interactive states (neutral hoverable surfaces — for pill-tabs, chips, secondary buttons, hover rows). Resolve differently per theme. */ --interactive: rgba(255,255,255,.04); --interactive-hover: rgba(255,255,255,.07); --interactive-active: rgba(255,255,255,.10); --on-interactive: var(--text-primary); --on-interactive-active: var(--text-display); /* Inverted-active surface used for "selected pill" / primary chip in dark mode the active is a lighter step; in light mode below it flips dark. */ --pill-active-bg: var(--interactive-active); --pill-active-fg: var(--text-display); /* Field surfaces */ --field-bg: rgba(255,255,255,.03); --field-bg-hover: rgba(255,255,255,.05); --field-border: var(--hairline-strong); --field-border-focus: var(--accent); --field-ring-focus: 0 0 0 3px var(--accent-soft); /* Effects */ --blur-glass: 24px; --blur-overlay: 40px; --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 4px 16px -4px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); --shadow-3: 0 12px 40px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.10); --shadow-overlay: 0 24px 80px -16px rgba(0,0,0,.7); --inner-glow: inset 0 1px 0 rgba(255,255,255,.05); /* Spacing — 8px grid (Design System v1 §1.1). Use everywhere. No ad-hoc px paddings outside this scale. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px; --s-11: 96px; /* Border-radius (Design System v1 §1.5) */ --r-none: 0; --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 9999px; /* Type — display weights are intentionally light. (§1.2) */ --font-display: 'Montserrat', sans-serif; --font-body: 'Montserrat', sans-serif; --weight-display: 250; --weight-display-strong: 300; --weight-body: 400; --weight-body-strong: 600; --weight-label: 500; --tracking-display: -0.015em; --tracking-body: 0; --tracking-label: 0.04em; /* Motion (§1.8) — 5 durations, 3 easings, no ad-hoc values. `--t-slow` kept as alias of `--t-smooth` for legacy callers. */ --ease-cockpit: cubic-bezier(.22,1,.36,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --ease-linear: linear; --t-instant: 80ms; --t-fast: 140ms; --t-base: 220ms; --t-smooth: 380ms; --t-slow: 380ms; --t-cinematic: 600ms; /* Icon sizes (§2.1) */ --icon-xs: 12px; --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px; --icon-xl: 24px; } /* ============================================================ COCKPIT · LIGHT — own identity, not inverted dark ============================================================ */ html[data-cockpit="on"][data-theme="light"], html[data-cockpit="on"] body.theme-light { /* Legacy compat — mirrors styles.css body.theme-light so Phase 1 alone produces no visible change. Cockpit-light identity (warm-off-white, editorial) lives in the semantic tokens below. */ --c-dark: 245 245 245; --c-blue: 255 255 255; --c-mid: 163 163 163; --c-light: 82 82 82; --c-accent: 59 130 246; --bg-body: #f5f5f5; --text-main: #404040; --text-bright: #262626; --shadow-card: rgba(0,0,0,.08); --scrollbar-track: #f5f5f5; --scrollbar-thumb: #a3a3a3; --glow-accent: rgba(59,130,246,.20); --glow-success: rgba(34,197,94,.15); --glow-danger: rgba(239,68,68,.15); /* Semantic surfaces */ --surface-base: #F5F6F8; --surface-1: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #FFFFFF; --surface-glass: rgba(255,255,255,.65); --surface-glass-strong: rgba(255,255,255,.85); --surface-overlay: rgba(255,255,255,.92); --surface-scrim: rgba(15,16,21,.32); /* Text */ --text-display: #0F1015; --text-primary: #0F1015; --text-secondary: #5A5E66; --text-muted: #9BA0A8; --text-faint: #C4C8CE; --text-on-accent: #FFFFFF; --text-on-light: #0F1015; /* Hairlines */ --hairline: rgba(15,16,21,.07); --hairline-strong: rgba(15,16,21,.12); --hairline-bright: rgba(15,16,21,.20); /* Status — saturated for white surfaces */ --accent: #2563EB; --accent-soft: rgba(37,99,235,.10); --accent-glow: rgba(37,99,235,.22); --success: #059669; --success-soft: rgba(5,150,105,.10); --warning: #D97706; --warning-soft: rgba(217,119,6,.12); --danger: #DC2626; --danger-soft: rgba(220,38,38,.10); --info: #2563EB; --info-soft: rgba(37,99,235,.10); /* Interactive — light mode flips active to dark fill for clear contrast */ --interactive: rgba(15,16,21,.04); --interactive-hover: rgba(15,16,21,.06); --interactive-active: rgba(15,16,21,.08); --on-interactive: var(--text-primary); --on-interactive-active: var(--text-display); --pill-active-bg: #0F1015; --pill-active-fg: #FFFFFF; /* Field surfaces */ --field-bg: #FFFFFF; --field-bg-hover: #FAFAFB; --field-border: rgba(15,16,21,.14); --field-border-focus: var(--accent); --field-ring-focus: 0 0 0 3px var(--accent-soft); /* Effects — softer for white */ --blur-glass: 16px; --blur-overlay: 24px; --shadow-1: 0 1px 2px rgba(15,16,21,.04); --shadow-2: 0 2px 12px -2px rgba(15,16,21,.07), 0 0 0 1px rgba(15,16,21,.07); --shadow-3: 0 12px 36px -8px rgba(15,16,21,.12), 0 0 0 1px rgba(15,16,21,.07); --shadow-overlay: 0 24px 60px -12px rgba(15,16,21,.18); --inner-glow: inset 0 1px 0 rgba(255,255,255,.6); } /* OS-preference fallback when data-theme="auto" is set explicitly */ @media (prefers-color-scheme: light) { html[data-cockpit="on"][data-theme="auto"] { --c-dark: 245 246 248; --c-blue: 255 255 255; --c-mid: 230 233 238; --c-light: 90 94 102; --bg-body: #F5F6F8; --text-main: #5A5E66; --text-bright: #0F1015; --shadow-card: rgba(15,16,21,.05); --scrollbar-thumb: rgba(15,16,21,.12); --surface-base: #F5F6F8; --surface-1: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #FFFFFF; --surface-glass: rgba(255,255,255,.65); --surface-glass-strong: rgba(255,255,255,.85); --surface-overlay: rgba(255,255,255,.92); --surface-scrim: rgba(15,16,21,.32); --text-display: #0F1015; --text-primary: #0F1015; --text-secondary: #5A5E66; --text-muted: #9BA0A8; --text-faint: #C4C8CE; --hairline: rgba(15,16,21,.07); --hairline-strong: rgba(15,16,21,.12); --hairline-bright: rgba(15,16,21,.20); --accent: #2563EB; --accent-soft: rgba(37,99,235,.10); --accent-glow: rgba(37,99,235,.22); --success: #059669; --warning: #D97706; --danger: #DC2626; --shadow-1: 0 1px 2px rgba(15,16,21,.04); --shadow-2: 0 2px 12px -2px rgba(15,16,21,.07), 0 0 0 1px rgba(15,16,21,.07); --shadow-3: 0 12px 36px -8px rgba(15,16,21,.12), 0 0 0 1px rgba(15,16,21,.07); --shadow-overlay: 0 24px 60px -12px rgba(15,16,21,.18); --inner-glow: inset 0 1px 0 rgba(255,255,255,.6); } } /* Reduced-motion: shorten transitions, kill non-essential animations. Honoured globally so even legacy components calm down. */ @media (prefers-reduced-motion: reduce) { html[data-cockpit="on"] { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } }