/* * Design tokens — Sprint 1 (UI redesign, feature/ui-redesign). * * Single source of truth for every color/type/space/radius/shadow value * used anywhere in the app shell and component system. Nothing outside * this file should hardcode a hex value or a raw px spacing number — * everything else references these custom properties. * * Theme switching: `` (Bootstrap 5.3's own * convention, reused rather than inventing a second mechanism) flips the * whole token set via the `[data-bs-theme="dark"]` block below. Bootstrap's * OWN `--bs-*` variables are intentionally not touched here — components.css * restyles the specific Bootstrap component classes this app actually uses * directly, keyed to these tokens, which is more predictable than relying * on Bootstrap's internal variable graph staying stable across components. */ :root { /* --- Color: brand --- */ --color-primary: #4f46e5; --color-primary-hover: #4338ca; --color-primary-active: #3730a3; --color-primary-subtle: #eef2ff; --color-primary-contrast: #ffffff; --color-secondary: #64748b; --color-secondary-hover: #475569; --color-secondary-subtle: #f1f5f9; /* --- Color: surfaces --- */ --color-background: #f8fafc; --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-overlay: rgba(15, 23, 42, 0.48); /* --- Color: semantic --- */ --color-success: #16a34a; --color-success-subtle: #f0fdf4; --color-success-border: #bbf7d0; --color-warning: #d97706; --color-warning-subtle: #fffbeb; --color-warning-border: #fde68a; --color-danger: #dc2626; --color-danger-subtle: #fef2f2; --color-danger-border: #fecaca; --color-info: #0284c7; --color-info-subtle: #f0f9ff; --color-info-border: #bae6fd; /* --- Color: borders / text / state --- */ --color-border: #e2e8f0; --color-border-strong: #cbd5e1; --color-muted: #94a3b8; --color-text-primary: #0f172a; --color-text-secondary: #475569; --color-text-on-primary: #ffffff; --color-hover: rgba(15, 23, 42, 0.04); --color-active: rgba(15, 23, 42, 0.07); --color-focus-ring: rgba(79, 70, 229, 0.35); --color-disabled-bg: #f1f5f9; --color-disabled-text: #94a3b8; /* --- Typography --- */ --font-family-base: "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-size-display: 2.5rem; --line-height-display: 1.15; --letter-spacing-display: -0.02em; --font-weight-display: 700; --font-size-h1: 1.75rem; --line-height-h1: 1.2; --letter-spacing-h1: -0.015em; --font-weight-h1: 700; --font-size-h2: 1.375rem; --line-height-h2: 1.3; --letter-spacing-h2: -0.01em; --font-weight-h2: 600; --font-size-h3: 1.125rem; --line-height-h3: 1.4; --font-weight-h3: 600; --font-size-h4: 1rem; --line-height-h4: 1.4; --font-weight-h4: 600; --font-size-body: 0.9375rem; --line-height-body: 1.6; --font-weight-body: 400; --font-size-small: 0.8125rem; --line-height-small: 1.5; --font-size-caption: 0.75rem; --line-height-caption: 1.4; --letter-spacing-caption: 0.02em; --font-weight-caption: 500; --font-size-button: 0.875rem; --font-weight-button: 500; /* --- Spacing (8px system; -1/-3 are half-steps for tight UI chrome) --- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* --- Radius --- */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-full: 999px; /* --- Shadows (soft, cool-toned, low opacity — no heavy drop shadows) --- */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04); --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.06); /* --- Motion --- */ --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1); /* --- Shell dimensions --- */ --shell-sidebar-width: 260px; --shell-sidebar-width-collapsed: 72px; --shell-topbar-height: 60px; --z-topbar: 1020; --z-sidebar: 1030; --z-dropdown: 1040; --z-modal: 1050; --z-toast: 1060; } [data-bs-theme="dark"] { /* --- Color: brand (brighter for AA contrast on dark surfaces) --- */ --color-primary: #818cf8; --color-primary-hover: #a5b4fc; --color-primary-active: #6366f1; --color-primary-subtle: rgba(129, 140, 248, 0.14); --color-primary-contrast: #0b0e14; --color-secondary: #94a3b8; --color-secondary-hover: #cbd5e1; --color-secondary-subtle: rgba(148, 163, 184, 0.12); /* --- Color: surfaces --- */ --color-background: #0b0e14; --color-surface: #12151c; --color-surface-raised: #1a1e27; --color-overlay: rgba(2, 4, 8, 0.64); /* --- Color: semantic --- */ --color-success: #4ade80; --color-success-subtle: rgba(74, 222, 128, 0.12); --color-success-border: rgba(74, 222, 128, 0.28); --color-warning: #fbbf24; --color-warning-subtle: rgba(251, 191, 36, 0.12); --color-warning-border: rgba(251, 191, 36, 0.28); --color-danger: #f87171; --color-danger-subtle: rgba(248, 113, 113, 0.12); --color-danger-border: rgba(248, 113, 113, 0.28); --color-info: #38bdf8; --color-info-subtle: rgba(56, 189, 248, 0.12); --color-info-border: rgba(56, 189, 248, 0.28); /* --- Color: borders / text / state --- */ --color-border: #232733; --color-border-strong: #2e3340; --color-muted: #64748b; --color-text-primary: #f1f5f9; --color-text-secondary: #94a3b8; --color-text-on-primary: #0b0e14; --color-hover: rgba(255, 255, 255, 0.06); --color-active: rgba(255, 255, 255, 0.09); --color-focus-ring: rgba(129, 140, 248, 0.4); --color-disabled-bg: #1a1e27; --color-disabled-text: #4b5468; /* --- Shadows (dark surfaces need more contrast to read as elevation) --- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.36), 0 2px 4px rgba(0, 0, 0, 0.24); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.28); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3); } /* Respects the OS preference before any explicit choice has been persisted (theme.js sets data-bs-theme from localStorage as soon as possible, and falls back to this media query on first visit — see that file). */ @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) { color-scheme: dark; } } :root { color-scheme: light; } [data-bs-theme="dark"] { color-scheme: dark; }