/* ========================================================================== SCRT Design Tokens — single source of truth -------------------------------------------------------------------------- Every CSS variable used in the app is defined here. No other file should contain a :root{} block. Files that need design values must *consume* the tokens via var(--token-name), never redefine them. Effective values match what was rendered before consolidation (when three competing :root blocks fought each other and modern-components.css won because it loaded last). Visual change is deliberately zero in this file. Future cleanup will migrate consumers to canonical names and prune the legacy-alias section at the bottom. See docs/DESIGN_SYSTEM.md for naming rules and how to extend. ========================================================================== */ :root { /* ==================================================================== Brand colors ==================================================================== */ --color-brand-blue: #0A0094; /* NAPA primary blue */ --color-brand-blue-dark: #060055; /* heavy emphasis / pressed */ --color-brand-blue-light: #0D00B8; /* gradient end / accent */ --color-brand-blue-bg: #E8E9FF; /* pastel surface tint */ --color-brand-yellow: #FFC836; /* NAPA accent yellow */ --color-brand-yellow-dark: #FFB700; --color-brand-yellow-bg: #FFF9E6; /* pastel surface tint */ --color-brand-red: #DC143C; /* ==================================================================== Semantic colors ==================================================================== */ --color-primary: var(--color-brand-blue); --color-secondary: var(--color-brand-yellow); --color-success: #28A745; --color-danger: #DC3545; --color-warning: #FFC107; --color-info: #17A2B8; /* ==================================================================== Neutrals ==================================================================== */ --color-white: #FFFFFF; --color-gray-50: #F8F9FA; --color-gray-100: #F1F3F4; --color-gray-200: #E9ECEF; --color-gray-300: #DEE2E6; --color-gray-400: #CED4DA; --color-gray-500: #ADB5BD; --color-gray-600: #6C757D; --color-gray-700: #495057; --color-gray-800: #343A40; --color-gray-900: #212529; --color-text: var(--color-gray-900); --color-text-muted: var(--color-gray-600); /* ==================================================================== Surfaces ==================================================================== */ --color-bg-body: #F4F6F9; --color-bg-surface: #FFFFFF; --color-bg-light: var(--color-gray-50); --color-bg-hover: var(--color-brand-blue-light); /* preserves current behavior */ /* ==================================================================== Borders ==================================================================== */ --color-border: var(--color-gray-200); --color-border-light: var(--color-gray-100); --color-border-dark: var(--color-gray-300); /* ==================================================================== Spacing — canonical --space-* prefix (consumers may still use the legacy --spacing-* aliases at the bottom of this file) ==================================================================== */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ /* ==================================================================== Radius ==================================================================== */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-pill: 50rem; --radius-circle: 50%; /* ==================================================================== Shadows ==================================================================== */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16); --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.20); --shadow-focus: 0 0 0 3px rgba(10, 0, 148, 0.15); /* ==================================================================== Typography ==================================================================== */ --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 2rem; /* 32px */ --font-size-4xl: 2.5rem; /* 40px */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-base: 1.5; --line-height-loose: 1.75; /* ==================================================================== Transitions ==================================================================== */ --transition-fast: all 0.15s ease; /* matches modern-components effective */ --transition-base: all 0.3s ease; --transition-slow: all 0.5s ease; /* ==================================================================== Z-index scale ==================================================================== */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-loading: 9999; /* ==================================================================== Layout-specific tokens ==================================================================== */ --sidebar-bg: #000A4D; --sidebar-hover: #0033A0; /* ==================================================================== Legacy aliases — DO NOT introduce new usages. These exist so files that consumed the old token names keep working after the three competing :root{} blocks were deleted. Migrate consumers to the canonical names above, then prune from this section. ==================================================================== */ /* napa-theme legacy */ --napa-blue: var(--color-brand-blue); --napa-yellow: var(--color-brand-yellow); --napa-red: var(--color-brand-red); --napa-dark-blue: var(--sidebar-bg); --napa-light-blue: var(--sidebar-hover); /* scrt-* color aliases */ --scrt-blue: var(--color-brand-blue); --scrt-yellow: var(--color-brand-yellow); --scrt-dark-blue: var(--color-brand-blue-dark); --scrt-light-blue: var(--color-brand-blue-light); --scrt-light-blue-bg: var(--color-brand-blue-bg); --scrt-light-yellow-bg: var(--color-brand-yellow-bg); --scrt-blue-dark: var(--color-brand-blue-dark); --scrt-blue-darker: var(--color-brand-blue-dark); --scrt-yellow-dark: var(--color-brand-yellow-dark); --scrt-light-yellow: var(--color-brand-yellow-bg); /* bg / surface aliases */ --content-bg: var(--color-bg-body); --bg-body: var(--color-bg-body); --bg-white: var(--color-bg-surface); --bg-light: var(--color-bg-light); --bg-hover: var(--color-bg-hover); --card-shadow: var(--shadow-sm); /* semantic color aliases */ --success-green: var(--color-success); --danger-red: var(--color-danger); --warning-yellow: var(--color-warning); --info-blue: var(--color-info); /* border aliases */ --border-color: var(--color-border); --border-color-light: var(--color-border-light); --border-color-dark: var(--color-border-dark); /* typography aliases */ --font-primary: var(--font-family-base); /* spacing aliases — 73 existing consumers use --spacing-* */ --spacing-xs: var(--space-xs); --spacing-sm: var(--space-sm); --spacing-md: var(--space-md); --spacing-lg: var(--space-lg); --spacing-xl: var(--space-xl); --spacing-2xl: var(--space-2xl); --spacing-3xl: var(--space-3xl); /* line-height aliases (modern-base names) */ --line-height-sm: var(--line-height-tight); --line-height-lg: var(--line-height-loose); /* transition aliases */ --transition-normal: var(--transition-base); }