/* ========================================================================== tokens.css — NV ETOS v2 design tokens (FLAT TWO-TONE). Palette: deep navy #0F1C2E + warm off-white #F5F2ED + one accent #2563EB. No gradients on structure, no glow, no colored shadows, no grain. Variable NAMES are kept stable from v1 so all components keep working; only their values change. Theme set via . ========================================================================== */ :root { /* ---- Navy scale (the dark tone) ---- */ --navy-900: #0a1420; --navy-800: #0f1c2e; /* base deep navy */ --navy-700: #16293d; --navy-600: #1e3650; --navy-500: #2c4866; --navy-400: #3e5a78; /* ---- Paper scale (the light tone, warm off-white) ---- */ --paper: #f5f2ed; --paper-2: #fbf9f5; --paper-3: #ece7dd; /* ---- Accent (single functional blue) ---- */ --accent-700: #1a45be; --accent-600: #1d4fd7; --accent-500: #2563eb; --accent-400: #3b82f6; /* ---- Graphite / brand wordmark ---- */ --graphite: #1f2a37; /* ---- Neutral ramp ---- */ --white: #ffffff; --gray-50: #f4f5f7; --gray-100: #eceef1; --gray-200: #e2e4e9; --gray-300: #d2d6dd; --gray-400: #aab2bf; --gray-500: #6b7685; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2733; --gray-900: #121821; /* ---- Semantic (flat, muted to sit with navy/blue) ---- */ --success: #15803d; --success-bg: #e6efe7; --warning: #b45309; --warning-bg: #f6ecdc; --danger: #b42318; --danger-bg: #f7e4e1; --info: #2563eb; --info-bg: #e6edfb; --pending: #6d4aaa; --pending-bg: #ece8f6; /* ---- Typography: Archivo (display) + IBM Plex Sans (body) + IBM Plex Mono (data) ---- */ --font-display: "Archivo", "Segoe UI", system-ui, sans-serif; --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.2rem; --fs-4xl: 2.9rem; --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.6; --track-tight: -0.02em; --track-snug: -0.01em; --track-wide: 0.06em; /* ---- Spacing (tight, intentional) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px; --sp-7: 44px; --sp-8: 60px; /* ---- Radii (small, editorial) ---- */ --r-xs: 3px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-full: 999px; /* ---- Layout ---- */ --sidebar-w: 256px; --sidebar-w-collapsed: 72px; --topbar-h: 60px; --content-max: 1360px; /* ---- Motion (no spring overshoot; crisp) ---- */ --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 110ms; --dur: 170ms; --dur-slow: 280ms; --z-base: 1; --z-panel: 60; --z-drawer: 70; --z-modal: 80; --z-toast: 90; --z-login: 100; } /* ===================== LIGHT THEME (off-white canvas) ===================== */ :root, [data-theme="light"] { color-scheme: light; --bg: var(--paper); --bg-tint: var(--paper); --surface: var(--white); --surface-2: var(--paper-2); --surface-3: var(--paper-3); --overlay: rgba(15, 28, 46, 0.46); --text: var(--navy-800); --text-strong: var(--navy-900); --text-muted: var(--gray-500); --text-faint: var(--gray-400); --text-on-brand: #ffffff; --border: rgba(15, 28, 46, 0.14); --border-soft: rgba(15, 28, 46, 0.08); --border-strong: rgba(15, 28, 46, 0.26); --primary: var(--accent-500); --primary-hover: var(--accent-700); --primary-soft: rgba(37, 99, 235, 0.08); --primary-soft-border: rgba(37, 99, 235, 0.24); --ring: rgba(37, 99, 235, 0.45); --sidebar-bg: var(--navy-800); /* two-tone: navy rail on light */ --sidebar-border: rgba(245, 242, 237, 0.10); --sidebar-item: #aeb9c6; --sidebar-item-active-bg: rgba(255, 255, 255, 0.08); --sidebar-item-active: #ffffff; --topbar-bg: rgba(245, 242, 237, 0.92); /* Flat: no glow, no colored shadow. Overlays get a subtle neutral shadow only. */ --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 16px 40px -24px rgba(10, 20, 32, 0.45); --shadow-glow: none; --chart-grid: rgba(15, 28, 46, 0.10); --chart-text: #5a6b7b; } /* ===================== DARK THEME (navy canvas) ===================== */ [data-theme="dark"] { color-scheme: dark; --bg: var(--navy-900); --bg-tint: var(--navy-900); --surface: var(--navy-800); --surface-2: var(--navy-700); --surface-3: var(--navy-600); --overlay: rgba(5, 10, 18, 0.66); --text: var(--paper); --text-strong: #ffffff; --text-muted: #9daebf; --text-faint: #647688; --text-on-brand: #ffffff; --border: rgba(245, 242, 237, 0.14); --border-soft: rgba(245, 242, 237, 0.07); --border-strong: rgba(245, 242, 237, 0.26); --primary: var(--accent-400); --primary-hover: #6fa0f7; --primary-soft: rgba(59, 130, 246, 0.14); --primary-soft-border: rgba(59, 130, 246, 0.30); --ring: rgba(59, 130, 246, 0.5); --sidebar-bg: var(--navy-900); --sidebar-border: rgba(245, 242, 237, 0.08); --sidebar-item: #9daebf; --sidebar-item-active-bg: rgba(255, 255, 255, 0.06); --sidebar-item-active: #ffffff; --topbar-bg: rgba(15, 28, 46, 0.92); --success-bg: rgba(21, 128, 61, 0.18); --warning-bg: rgba(180, 83, 9, 0.20); --danger-bg: rgba(180, 35, 24, 0.22); --info-bg: rgba(37, 99, 235, 0.20); --pending-bg: rgba(109, 74, 170, 0.24); --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 20px 48px -28px rgba(0, 0, 0, 0.7); --shadow-glow: none; --chart-grid: rgba(245, 242, 237, 0.10); --chart-text: #9daebf; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }