/* ============================================================================= INSIGHT EDITORIAL DARK — Design Tokens Ohio School Insight ============================================================================= Single source of truth for all design decisions. Every color, spacing value, motion curve, and elevation token used across the system lives here. Import this file first in any HTML document. ============================================================================= */ :root { /* --------------------------------------------------------------------------- Surface Hierarchy Deep navy foundation — 7 tonal steps from near-black to raised container. Sections are distinguished by tonal background shifts, never borders. --------------------------------------------------------------------------- */ --surface-container-lowest: #060e20; /* Page chrome background, deepest wells */ --surface: #0b1326; /* Default document surface */ --surface-container-low: #131b2e; /* Alternate section backgrounds */ --surface-container: #171f33; /* Standard card background */ --surface-container-high: #222a3d; /* Elevated cards, dropdowns */ --surface-container-highest: #2d3449; /* Highest raised surface, badges */ --surface-bright: #31394d; /* Hovered rows, interactive highlights */ --surface-variant: #2d3449; /* Matches container-highest — chip/tag bg */ --background: #0b1326; /* document background */ /* --------------------------------------------------------------------------- Primary Palette — Teal / Cyan Used for CTAs, active indicators, data highlights, and interactive chrome. --------------------------------------------------------------------------- */ --primary: #3cddc7; /* Brand teal — links, buttons, accents */ --primary-container: #001c18; /* Tonal container behind primary content */ --primary-fixed: #62fae3; /* High-brightness fixed variant */ --primary-fixed-dim: #3cddc7; /* Dim variant of fixed (same as primary) */ --on-primary: #003731; /* Text/icons on primary-colored surfaces */ --on-primary-container: #009182; /* Text/icons on primary container */ --on-primary-fixed: #00201c; /* Text/icons on primary-fixed */ --on-primary-fixed-variant: #005047; /* Variant text on primary-fixed */ --inverse-primary: #006b5f; /* Primary color in light-mode context */ /* --------------------------------------------------------------------------- Secondary Palette — Gold / Amber Used for star ratings, callout tags, highlight badges, data accents. --------------------------------------------------------------------------- */ --secondary: #ffc640; /* Gold — star fills, highlight tags */ --secondary-container: #e3aa00; /* Tonal container, gradient stops */ --secondary-fixed: #ffdf9f; /* High-brightness gold */ --secondary-fixed-dim: #f9bd22; /* Dim variant of secondary-fixed */ --on-secondary: #402d00; /* Dark text on gold backgrounds */ --on-secondary-container: #5a4100; /* Text on secondary container */ /* --------------------------------------------------------------------------- Tertiary Palette — Blue-Gray Used for peer comparison lines, secondary chart series, muted UI chrome. --------------------------------------------------------------------------- */ --tertiary: #b9c7e0; /* Blue-gray — peer comparison, subtle UI */ --tertiary-container: #09182a; /* Tonal background for tertiary content */ --tertiary-fixed: #d5e3fd; /* High-brightness blue-gray */ --on-tertiary: #233144; /* Text on tertiary surfaces */ --on-tertiary-container: #738298; /* Muted text on tertiary container */ /* --------------------------------------------------------------------------- Text & Content Never use pure #FFFFFF — use these tokens for all text rendering. --------------------------------------------------------------------------- */ --on-surface: #dae2fd; /* Primary body text, headings */ --on-surface-variant: #c6c6cd; /* Secondary text, metadata, labels */ --on-background: #dae2fd; /* Text rendered directly on background */ --outline: #909097; /* Visible borders (used sparingly) */ --outline-variant: #45464d; /* Subtle dividers, chart grid lines */ --inverse-surface: #dae2fd; /* Surface color in inverted contexts */ --inverse-on-surface: #283044; /* Text on inverse surface */ /* --------------------------------------------------------------------------- Error / Destructive --------------------------------------------------------------------------- */ --error: #ffb4ab; /* Error text, icons */ --error-container: #93000a; /* Error background surface */ --on-error: #690005; /* Text on error buttons */ --on-error-container: #ffdad6; /* Text on error container */ /* --------------------------------------------------------------------------- Typography Scale Editorial hierarchy: Public Sans for data/UI, Newsreader for editorial serif. --------------------------------------------------------------------------- */ --font-ui: 'Public Sans', system-ui, -apple-system, sans-serif; --font-editorial: 'Newsreader', 'Georgia', serif; --text-xs: 0.625rem; /* 10px — labels, uppercase tracking */ --text-sm: 0.6875rem; /* 11px — nav links, button text */ --text-base: 0.875rem; /* 14px — body default */ --text-md: 1rem; /* 16px — comfortable reading */ --text-lg: 1.125rem; /* 18px — table district names, lead text */ --text-xl: 1.25rem; /* 20px — card titles */ --text-2xl: 1.5rem; /* 24px — section headings */ --text-3xl: 2rem; /* 32px — hero stats */ --text-4xl: 2.5rem; /* 40px — hero headings */ --text-5xl: 3.5rem; /* 56px — display */ --tracking-widest: 0.2em; /* Uppercase labels, nav links */ --tracking-wide: 0.08em; /* Subheadings */ --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.7; /* --------------------------------------------------------------------------- Spacing Scale (4px base grid) --------------------------------------------------------------------------- */ --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 */ --space-20: 5rem; /* 80px */ /* --------------------------------------------------------------------------- Border Radius --------------------------------------------------------------------------- */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* --------------------------------------------------------------------------- Motion & Easing --------------------------------------------------------------------------- */ --ease-editorial: cubic-bezier(0.4, 0, 0.2, 1); /* Material standard */ --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); /* Elements entering */ --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* Elements leaving */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Springy emphasis */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-standard: 300ms; --duration-slow: 500ms; --duration-slower: 800ms; /* --------------------------------------------------------------------------- Elevation & Glow Ambient shadows use the darkest surface color for naturalistic depth. Glow effects use primary teal with opacity for the editorial accent feel. --------------------------------------------------------------------------- */ --shadow-ambient: 0 20px 40px rgba(6, 14, 32, 0.6); --shadow-sm: 0 2px 8px rgba(6, 14, 32, 0.4); --shadow-md: 0 8px 24px rgba(6, 14, 32, 0.5); --shadow-lg: 0 20px 40px rgba(6, 14, 32, 0.6); --shadow-xl: 0 32px 64px rgba(6, 14, 32, 0.7); --glow-primary: 0 0 15px rgba(60, 221, 199, 0.8); --glow-primary-soft: 0 0 20px rgba(60, 221, 199, 0.4); --glow-primary-wide: 0 0 40px rgba(60, 221, 199, 0.25); --glow-secondary: 0 0 15px rgba(255, 198, 64, 0.6); /* --------------------------------------------------------------------------- Glassmorphism Used for floating panels, overlays, and sticky navigation elements. --------------------------------------------------------------------------- */ --glass-bg: rgba(23, 31, 51, 0.85); --glass-bg-light: rgba(34, 42, 61, 0.80); --glass-blur: blur(16px); --glass-blur-heavy: blur(24px); --glass-border: 1px solid rgba(60, 221, 199, 0.12); /* --------------------------------------------------------------------------- Layout --------------------------------------------------------------------------- */ --container-max: 80rem; /* 1280px */ --sidebar-width: 16rem; /* 256px */ --nav-height: 3.5rem; /* 56px top nav */ --mobile-nav-h: 4rem; /* 64px bottom nav on mobile */ /* --------------------------------------------------------------------------- Z-Index Scale --------------------------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 20; --z-sticky: 30; --z-overlay: 40; --z-modal: 50; --z-toast: 60; /* --------------------------------------------------------------------------- Chart / Data Visualization Palette Consistent colors for multi-series charts across the application. --------------------------------------------------------------------------- */ --chart-1: #3cddc7; /* Primary teal — district line */ --chart-2: #ffc640; /* Gold — secondary series */ --chart-3: #b9c7e0; /* Blue-gray — state average / peer */ --chart-4: #7b8bce; /* Periwinkle — fourth series */ --chart-5: #e87d6a; /* Coral — alert/warning series */ --chart-6: #85c1a3; /* Muted green — passing/growth */ }