/* ── Nortwise Design Tokens ────────────────────────────────────────── OKLCH throughout. Sidebar dark slate; canvas neutral white. Inter loaded via base.html tag. ───────────────────────────────────────────────────────────────── */ :root { /* ── BRAND ──────────────────────────────────────────────────────── */ --color-brand: oklch(59% 0.22 38); /* Nortwise orange */ --color-brand-hover: oklch(51% 0.21 38); /* Pressed / hover */ --color-brand-muted: oklch(87% 0.10 38); /* Chip bg, tag bg */ --color-brand-subtle: oklch(96% 0.04 38); /* Very light tint */ --color-brand-text: oklch(54% 0.21 38); /* Orange on white */ /* ── CANVAS (light mode) ─────────────────────────────────────────── */ --color-bg: oklch(96.5% 0 0); /* Page background */ --color-surface: oklch(100% 0 0); /* Cards, panels */ --color-surface-raised: oklch(100% 0 0); /* Elevated */ --color-border: oklch(90.5% 0.004 255); /* Subtle border */ --color-border-strong: oklch(80% 0.006 255); /* Strong border */ /* ── SIDEBAR ─────────────────────────────────────────────────────── */ --color-sidebar-bg: oklch(15% 0.018 260); /* Deep slate */ --color-sidebar-surface: oklch(20% 0.016 260); /* Hover bg */ --color-sidebar-border: oklch(25% 0.016 260); /* Dividers */ --color-sidebar-text: oklch(70% 0.012 255); /* Default link */ --color-sidebar-text-active: oklch(100% 0 0); /* Active text */ --color-sidebar-section: oklch(44% 0.012 255); /* Section labels */ --color-sidebar-active-bg: oklch(59% 0.22 38); /* Orange pill */ --color-sidebar-active-glow: oklch(59% 0.22 38 / 0.22); /* ── TEXT ────────────────────────────────────────────────────────── */ --color-text-primary: oklch(14% 0.008 260); /* Near black */ --color-text-secondary: oklch(42% 0.010 260); /* Subdued */ --color-text-tertiary: oklch(61% 0.008 260); /* Placeholder */ --color-text-inverse: oklch(100% 0 0); /* On dark surfaces */ /* ── INTERACTION ─────────────────────────────────────────────────── */ --color-hover-bg: oklch(94% 0 0); --color-active-bg: oklch(91% 0 0); --color-focus-ring: oklch(59% 0.22 38 / 0.40); /* ── SEMANTIC ────────────────────────────────────────────────────── */ --color-success: oklch(54% 0.17 150); --color-success-light: oklch(95.5% 0.05 150); --color-warning: oklch(70% 0.17 65); --color-warning-light: oklch(97% 0.04 65); --color-danger: oklch(53% 0.22 25); --color-danger-light: oklch(96.5% 0.04 25); --color-info: oklch(55% 0.18 240); --color-info-light: oklch(95.5% 0.04 240); /* ── BACKWARDS-COMPAT ALIASES ────────────────────────────────────── */ --color-primary: var(--color-brand); --color-primary-dark: var(--color-brand-hover); --color-primary-light: var(--color-brand-muted); /* ── TYPOGRAPHY ──────────────────────────────────────────────────── */ --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-family-mono: 'JetBrains Mono', ui-monospace, 'Fira Code', 'Courier New', monospace; --font-size-xs: 0.75rem; /* 12 */ --font-size-sm: 0.875rem; /* 14 */ --font-size-base: 1rem; /* 16 */ --font-size-lg: 1.125rem; /* 18 */ --font-size-xl: 1.25rem; /* 20 */ --font-size-2xl: 1.5rem; /* 24 */ --font-size-3xl: 1.875rem; /* 30 */ --font-size-4xl: 2.25rem; /* 36 */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* ── SPACING (4px grid) ──────────────────────────────────────────── */ --space-0: 0; --space-px: 1px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* ── BORDER RADIUS ───────────────────────────────────────────────── */ --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 20px; --radius-full: 9999px; --radius: var(--radius-lg); /* legacy */ /* ── SHADOWS ─────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.04); --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.07), 0 1px 2px oklch(0% 0 0 / 0.04); --shadow-md: 0 4px 8px oklch(0% 0 0 / 0.07), 0 2px 4px oklch(0% 0 0 / 0.04); --shadow-lg: 0 10px 20px oklch(0% 0 0 / 0.08), 0 4px 8px oklch(0% 0 0 / 0.04); --shadow-xl: 0 20px 40px oklch(0% 0 0 / 0.10), 0 8px 16px oklch(0% 0 0 / 0.05); --shadow-brand: 0 0 0 3px var(--color-focus-ring); /* ── TRANSITIONS ─────────────────────────────────────────────────── */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 120ms var(--ease-out-quart); --transition-base: 180ms var(--ease-out-quart); --transition-slow: 280ms var(--ease-out-quart); /* ── Z-INDEX ─────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1035; --z-modal: 1040; --z-popover: 1050; --z-toast: 1060; --z-tooltip: 1070; } /* ── LIGHT MODE (explicit) ───────────────────────────────────────────── */ [data-theme="light"] { color-scheme: light; } /* ── DARK MODE (system, no explicit theme) ───────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: oklch(12% 0.012 260); --color-surface: oklch(17% 0.014 260); --color-surface-raised: oklch(21% 0.014 260); --color-border: oklch(27% 0.014 260); --color-border-strong: oklch(36% 0.014 260); --color-sidebar-bg: oklch(9% 0.012 260); --color-sidebar-surface:oklch(14% 0.012 260); --color-sidebar-border: oklch(20% 0.012 260); --color-text-primary: oklch(93% 0.005 255); --color-text-secondary: oklch(67% 0.008 255); --color-text-tertiary: oklch(48% 0.008 255); --color-hover-bg: oklch(23% 0.012 260); --color-active-bg: oklch(27% 0.012 260); --color-success-light: oklch(22% 0.07 150); --color-warning-light: oklch(22% 0.07 65); --color-danger-light: oklch(22% 0.07 25); --color-info-light: oklch(22% 0.07 240); --color-brand-subtle: oklch(22% 0.07 38); --color-brand-muted: oklch(30% 0.10 38); --color-primary-light: oklch(30% 0.10 38); } } /* ── DARK MODE (explicit data-theme="dark") ──────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --color-bg: oklch(12% 0.012 260); --color-surface: oklch(17% 0.014 260); --color-surface-raised: oklch(21% 0.014 260); --color-border: oklch(27% 0.014 260); --color-border-strong: oklch(36% 0.014 260); --color-sidebar-bg: oklch(9% 0.012 260); --color-sidebar-surface:oklch(14% 0.012 260); --color-sidebar-border: oklch(20% 0.012 260); --color-text-primary: oklch(93% 0.005 255); --color-text-secondary: oklch(67% 0.008 255); --color-text-tertiary: oklch(48% 0.008 255); --color-hover-bg: oklch(23% 0.012 260); --color-active-bg: oklch(27% 0.012 260); --color-success-light: oklch(22% 0.07 150); --color-warning-light: oklch(22% 0.07 65); --color-danger-light: oklch(22% 0.07 25); --color-info-light: oklch(22% 0.07 240); --color-brand-subtle: oklch(22% 0.07 38); --color-brand-muted: oklch(30% 0.10 38); --color-primary-light: oklch(30% 0.10 38); } /* ── REDUCED MOTION ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }