/* ============================================================================ CANOPY DESIGN TOKENS — v1.0.2 ---------------------------------------------------------------------------- Source of truth for colors, type, spacing, radii, shadows, motion. Load this BEFORE any other stylesheet (including Bootstrap overrides). Three layers: 1. PRIMITIVES — raw scales, no semantic meaning. 2. SEMANTIC — purpose-named tokens that reference primitives. 3. DOMAIN — Canopy-specific (scheduler role colors). Rule of thumb: stylesheets should consume LAYER 2 and LAYER 3. Reach into LAYER 1 only when you genuinely need a raw scale step (e.g. a custom heatmap ramp). ========================================================================= */ :root { /* ========================================================================== LAYER 1 — PRIMITIVES ========================================================================= */ /* --- Green scale (from dashboard.css — the more developed of the two) --- Brand primary lives at 800. Do not change these hexes without re-auditing the whole app; KPI accents, heatmap ramps, and role colors all depend on these specific values. */ --green-50: #F6FBF8; --green-100: #EDF6F0; --green-200: #D8F3DC; --green-300: #B7E4C7; --green-400: #95D5B2; --green-500: #74C69D; --green-600: #52B788; --green-700: #4A7C59; /* old --canopy-accent */ --green-800: #2E5A3C; /* old --canopy-forest — BRAND PRIMARY */ --green-900: #1E3D28; /* old --canopy-dark */ /* --- Cream / warm neutral --- The background signature. Kept as a one-off because it isn't part of the slate ramp — it's a warm off-white tuned for paired use with the forest green. */ --cream: #F5F2EB; /* old --canopy-warm */ /* --- Slate neutrals (cool grays for text + chrome) --- From dashboard.css. Used for body text, borders, table rules, chart gridlines. Do not mix with Bootstrap's --bs-gray-*. */ --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B; --slate-700: #334155; --slate-900: #0F172A; --white: #FFFFFF; --black: #000000; /* --- Status ramps (Tailwind-aligned, from dashboard.css) --- Replaces the main app's ad-hoc alert hexes. */ --red-100: #FEE2E2; --red-500: #EF4444; --red-600: #DC2626; --red-700: #B91C1C; --amber-100: #FEF3C7; --amber-500: #F59E0B; --amber-600: #D97706; --amber-700: #B45309; --blue-100: #DBEAFE; --blue-500: #3B82F6; --blue-600: #2563EB; --blue-700: #1D4ED8; /* --- Purple (new — role:high-school) --- Chosen to sit harmoniously with green/blue/amber role triplets. Mirrors the Tailwind 100/500/600/700 rhythm. */ --purple-100: #EDE9FE; --purple-500: #8B5CF6; --purple-600: #7C3AED; --purple-700: #6D28D9; /* --- Type scale (px) --- Named by role, not by heading level, so the scale survives semantic-level changes. Line-heights live with the scale step. */ --text-micro: 11px; /* uppercase labels, column headers */ --text-caption: 12px; /* secondary meta, table sublabels */ --text-body-sm: 13px; /* table cells, dense forms, badges inline */ --text-body: 14px; /* DEFAULT body text */ --text-body-lg: 16px; /* emphasized paragraph / dialog body */ --text-h3: 18px; /* card titles */ --text-h2: 22px; /* page/section headers */ --text-h1: 28px; /* page title on large screens */ --text-display: 32px; /* KPI numerals, hero */ --leading-tight: 1.15; /* display + large numerals */ --leading-snug: 1.3; /* headings */ --leading-normal: 1.5; /* body */ --tracking-tight: -0.02em; /* display, large Fraunces */ --tracking-normal: 0; --tracking-wide: 0.05em; /* uppercase micro-labels */ --tracking-wider: 0.08em; /* wordmark, sidebar section labels */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- Font families --- Body: Inter. Chosen over DM Sans for UI-density reasons (mature tabular numerics, optimized for 12–14px, higher x-height at small sizes on Windows). Fraunces stays for display; the decorative ampersand is a brand signature — do not substitute. */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* --- Spacing scale (4px base, used for margin/padding/gap) --- */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-12: 64px; /* --- Radius scale --- */ --radius-xs: 3px; /* inline tags, tiny chips */ --radius-sm: 6px; /* inputs, buttons, badges, heatmap cells */ --radius-md: 10px; /* cards, surfaces */ --radius-lg: 16px; /* modals, large panels */ --radius-pill: 9999px; /* --- Shadow scale --- */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04); --shadow-focus: 0 0 0 3px rgba(74, 124, 89, 0.25); /* --green-700 @ 25% */ /* --- Motion --- One duration scale, one easing. If you need bespoke motion, you almost certainly don't — use these. */ --duration-fast: 120ms; /* hover, focus, small state changes */ --duration-normal: 200ms; /* modals, tabs, panels */ --duration-slow: 400ms; /* variance bars, entrance animations */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-entrance: cubic-bezier(0, 0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* --- Breakpoints (for reference — use in @media directly) --- Bootstrap 5 defaults, preserved to avoid a grid rewrite: sm: 576px md: 768px lg: 992px xl: 1200px xxl: 1400px Canopy-specific: sidebar-collapse: 1024px (dashboard sidebar → drawer below this) schedule-stack: 768px (scheduler table → stacked cards below) */ /* --- Layout dimensions --- */ --sidebar-width: 240px; --header-height: 64px; --content-max: 1400px; /* --- Vibrant chart palette (Executive Summary Prototype 3) --- One vibrant step per existing hue family, scoped to data-vis surfaces only: KPI top accents, sparklines, chart strokes, stacked bars, utilization bars. Sits ~15–20% more saturated at a slightly lower lightness than the matching -600 step. NOT for chrome, borders, text, or status treatments — those still consume the institutional -500/-600/-700 steps. Rationale: DESIGN-DECISIONS.md §3 (Executive Summary handoff). */ --green-vibrant: #1F8F4E; --green-vibrant-2: #5AB381; --green-vibrant-3: #A7DCBB; --blue-vibrant: #2F6FEB; --blue-vibrant-2: #7DA4F2; --blue-vibrant-3: #C2D5FA; --amber-vibrant: #E07B00; --amber-vibrant-2: #F0A94D; --amber-vibrant-3: #FACF96; --navy-vibrant: #1E3A8A; --navy-vibrant-2: #6B83C4; --navy-vibrant-3: #C4CFE7; /* Rose — parked for a future use site (DESIGN-DECISIONS §2). Not consumed by the current Executive Summary. Do not delete — removing would force a re-vote. */ --rose-vibrant: #C2185B; --rose-vibrant-2: #DB6595; --rose-vibrant-3: #F2C1D4; /* ========================================================================== LAYER 2 — SEMANTIC Purpose-named. These are what components should consume by default. ========================================================================= */ /* --- Surfaces --- bg : the page canvas (cream — the signature). surface : cards, panels, table body. surface-2 : raised/hover state on surface. surface-inv: inverted (dark) surface — sidebar, command bar. sunken : below-surface wells (form fields on card, empty states). */ --color-bg: var(--cream); --color-surface: var(--white); --color-surface-2: var(--slate-50); --color-surface-inv: var(--green-900); --color-sunken: var(--slate-50); /* --- Text --- AA contrast ratios (on --color-surface white): primary #0F172A — 19.3 : 1 secondary #334155 — 11.6 : 1 muted #64748B — 4.8 : 1 (AA normal; NOT AA for <14px on colored bg) disabled #94A3B8 — 3.1 : 1 (decorative only) on-brand #FFFFFF — 8.9 : 1 on green-800 ✓ */ --color-text-primary: var(--slate-900); --color-text-secondary: var(--slate-700); --color-text-label: var(--slate-700); /* USE FOR TEXT <14px on white (e.g. micro-label). slate-500 fails AA below 14px. */ --color-text-muted: var(--slate-500); /* AA at >=14px only */ --color-text-disabled: var(--slate-400); --color-text-on-brand: var(--white); --color-text-on-accent: var(--white); --color-text-link: var(--green-800); --color-text-link-hover: var(--green-700); /* --- Borders --- */ --color-border: var(--slate-200); /* default hairlines */ --color-border-strong: var(--slate-300); /* input borders, dividers */ --color-border-subtle: var(--slate-100); /* zebra stripes, weakest rules */ --color-border-focus: var(--green-700); /* --- Brand --- */ --color-brand: var(--green-800); /* primary actions, navbar */ --color-brand-hover: var(--green-700); --color-brand-active: var(--green-900); --color-brand-subtle: var(--green-100); /* tinted bg for selected rows */ --color-brand-ring: rgba(74, 124, 89, 0.25); --color-accent: var(--green-600); /* KPI top-accent default */ /* --- Status --- Each status has: -bg (soft tint), -border (accent line), -fg (foreground text/icon), -solid (filled chip/button). */ --color-success-bg: var(--green-200); --color-success-border: var(--green-600); --color-success-fg: var(--green-800); --color-success-solid: var(--green-600); --color-warning-bg: var(--amber-100); --color-warning-border: var(--amber-500); --color-warning-fg: var(--amber-700); --color-warning-solid: var(--amber-500); --color-danger-bg: var(--red-100); --color-danger-border: var(--red-500); --color-danger-fg: var(--red-700); --color-danger-solid: var(--red-600); --color-info-bg: var(--blue-100); --color-info-border: var(--blue-500); --color-info-fg: var(--blue-700); --color-info-solid: var(--blue-600); /* --- Heatmap ramp (Executive Summary, coverage, utilization) --- */ --heat-0: var(--slate-100); /* empty */ --heat-1: var(--green-200); --heat-2: var(--green-400); --heat-3: var(--green-600); --heat-4: var(--green-800); --heat-5: var(--amber-500); /* warning */ --heat-over: var(--red-500); /* over capacity */ --heat-warn: var(--amber-vibrant); /* scheduling heatmap warn cells */ /* --- Category accents (Executive Summary KPI cards) --- One per top-level metric category. Maps category → hue in exactly one place so future re-coloring is a single-line change. */ --cat-staffing: var(--green-vibrant); --cat-compliance: var(--blue-vibrant); --cat-enrollment: var(--navy-vibrant); --cat-financial: var(--amber-vibrant); /* --- Enrollment palette triplet --- Consumed by FTE trend line + area, stacked-bar segments, and the utilization bars. Aliased separately from --cat-enrollment because three shades are needed (the other categories use one solid hue). */ --enroll: var(--navy-vibrant); --enroll-2: var(--navy-vibrant-2); --enroll-3: var(--navy-vibrant-3); /* ========================================================================== LAYER 3 — DOMAIN (Canopy-specific) Scheduler role colors. Each triplet is -bg / -border / -fg. All foreground values verified AA ≥ 4.5:1 on their paired -bg. ========================================================================= */ /* Regular classroom teacher — GREEN */ --role-regular-bg: var(--green-100); /* #EDF6F0 */ --role-regular-border: var(--green-700); /* #4A7C59 */ --role-regular-fg: var(--green-900); /* #1E3D28 — 13.0:1 on bg ✓ */ /* MCT / floater — BLUE */ --role-mct-bg: var(--blue-100); /* #DBEAFE */ --role-mct-border: var(--blue-600); /* #2563EB */ --role-mct-fg: var(--blue-700); /* #1D4ED8 — 7.4:1 on bg ✓ */ /* Admin / director — AMBER (orange family) */ --role-admin-bg: var(--amber-100); /* #FEF3C7 */ --role-admin-border: var(--amber-600); /* #D97706 */ --role-admin-fg: var(--amber-700); /* #B45309 — 5.1:1 on bg ✓ */ /* High-school student worker — PURPLE */ --role-hs-bg: var(--purple-100); /* #EDE9FE */ --role-hs-border: var(--purple-600); /* #7C3AED */ --role-hs-fg: var(--purple-700); /* #6D28D9 — 7.2:1 on bg ✓ */ /* Break / bench / ghost — neutral (used in view-mode) */ --role-break-bg: var(--slate-100); --role-break-border: var(--slate-400); --role-break-fg: var(--slate-700); /* Combining (closed classroom) — striped overlay pattern */ --combining-stripe: rgba(15, 23, 42, 0.03); --combining-bg: var(--slate-100); /* ========================================================================== DENSITY MODIFIERS Apply `.density-compact` on a table or container to switch to dense. Default targets the dashboard's current density. ========================================================================= */ /* Default density */ --table-padding-y: 10px; --table-padding-x: 14px; --table-font-size: var(--text-body-sm); /* 13px */ --row-height: 40px; --input-padding-y: 7px; --input-padding-x: 12px; --input-font-size: var(--text-body-sm); --button-padding-y: 7px; --button-padding-x: 14px; } /* Compact density modifier — scope with .density-compact on a table or wrapper to shrink paddings without changing tokens globally. */ .density-compact { --table-padding-y: 6px; --table-padding-x: 10px; --table-font-size: var(--text-caption); /* 12px */ --row-height: 32px; --input-padding-y: 5px; --input-padding-x: 9px; --input-font-size: var(--text-caption); --button-padding-y: 5px; --button-padding-x: 10px; } /* ============================================================================ BASE APPLICATION The minimum needed to wire the tokens into the page. Component styles live in their own files and consume these variables. ========================================================================= */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-normal); color: var(--color-text-primary); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01'; /* Inter: single-story a + g */ } h1, h2, h3, h4, .card-title, .card-header h5, .header-title, .kpi-value, .alert-count, .sidebar-brand h1 { font-family: var(--font-display); color: var(--color-text-primary); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); } /* Tabular numerics helper — put on any element showing numbers in a column. */ .num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } /* Uppercase micro-label — reusable utility for column headers + KPI captions. */ .micro-label { font-size: var(--text-micro); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-label); /* slate-700 — AA-safe at 11px */ }