/* ============================================================ * CATHEDRAL DESIGN TOKENS * KIPP Delta Analytics Platform V2 * * All visual properties as CSS custom properties. * No hardcoded values in components -- tokens only. * * Sections: * 1. Color Tokens * 2. Typography Tokens * 3. Spacing Tokens * 4. Layout Tokens * 5. Effect Tokens * 6. Print Overrides * * Last updated: 2026-02-27 (Step 1 of 18) * ============================================================ */ /* Google Fonts -- Dashboard register + Data font */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=JetBrains+Mono:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); /* ============================================================ * 1. COLOR TOKENS * ============================================================ */ :root { /* --- Primary Palette --- */ --color-cream: #faf8f5; --color-blue: #4a6fa5; --color-gold: #d4a843; --color-dark: #1a1a2e; --color-white: #ffffff; /* --- Primary alias (used by director.html) --- */ --primary: #1a5276; /* --- Blue Tints (for hover, focus, subtle backgrounds) --- */ --color-blue-light: #e8eef6; --color-blue-lighter: #f2f5fa; --color-blue-dark: #3a5a8a; /* --- Gold Tints --- */ --color-gold-light: #f5edda; --color-gold-lighter: #faf6ee; --color-gold-dark: #b8922e; /* --- Neutral Grays --- */ --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; /* --- Risk Tier Colors (concordance model) --- */ --color-critical: #b91c1c; --color-critical-bg: #fef2f2; --color-critical-border: #fecaca; --color-at-risk: #c2410c; --color-at-risk-bg: #fff7ed; --color-at-risk-border: #fed7aa; --color-watch: #a16207; --color-watch-bg: #fefce8; --color-watch-border: #fef08a; --color-on-track: #15803d; --color-on-track-bg: #f0fdf4; --color-on-track-border: #bbf7d0; /* --- Semantic Status Colors --- */ --color-success: #15803d; --color-success-bg: #f0fdf4; --color-warning: #a16207; --color-warning-bg: #fefce8; --color-danger: #b91c1c; --color-danger-bg: #fef2f2; --color-info: #4a6fa5; --color-info-bg: #e8eef6; /* --- Deep Dive Aliases (used in deep_dives/*.html templates) --- */ --risk-critical: var(--color-critical); --risk-at-risk: var(--color-at-risk); --risk-watch: var(--color-watch); --risk-on-track: var(--color-on-track); --risk-critical-bg: var(--color-critical-bg); --risk-critical-border: var(--color-critical-border); --accent-blue: var(--color-blue); --accent-amber: var(--color-gold); --color-amber: var(--color-gold); /* --- Container Content Width (deep dive pages) --- */ --container-content: var(--container-wide); /* --- Compliance Gauge Colors --- */ --color-compliance-high: #15803d; /* >= 90% */ --color-compliance-mid: #a16207; /* 80-89% */ --color-compliance-low: #b91c1c; /* < 80% */ --color-compliance-suppressed: #9ca3af; /* KBC: gauge suppressed */ /* --- Surface Colors --- */ --surface-primary: var(--color-cream); --surface-secondary: var(--color-white); --surface-elevated: var(--color-white); --surface-inset: var(--color-gray-50); --surface-overlay: rgba(26, 26, 46, 0.5); /* --- Text Colors --- */ --text-primary: var(--color-dark); --text-secondary: var(--color-gray-600); --text-muted: var(--color-gray-400); --text-inverse: var(--color-white); --text-link: var(--color-blue); --text-link-hover: var(--color-blue-dark); /* --- Border Colors --- */ --border-default: var(--color-gray-200); --border-strong: var(--color-gray-300); --border-focus: var(--color-blue); --border-error: var(--color-critical); /* ============================================================ * 2. TYPOGRAPHY TOKENS * ============================================================ */ /* --- Font Families --- */ /* Dashboard register: Source Serif 4 for body, system sans for UI */ --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-data: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace; /* Editorial register: for briefings and long-form content */ --font-editorial: 'Cormorant Garamond', Georgia, serif; /* --- Type Scale (1.25 ratio, base 16px) --- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ /* --- Line Heights --- */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; /* --- Font Weights --- */ --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- Letter Spacing --- */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ============================================================ * 3. SPACING TOKENS * ============================================================ */ /* --- Base Grid: 4px --- */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --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 */ --space-24: 6rem; /* 96px */ /* --- Component-Specific Spacing --- */ --card-padding: var(--space-5); --card-padding-sm: var(--space-3); --section-gap: var(--space-8); --page-margin: var(--space-4); --page-margin-desktop: var(--space-8); --kpi-gap: var(--space-4); --table-cell-padding: var(--space-3) var(--space-4); --table-cell-padding-sm: var(--space-2) var(--space-3); --breadcrumb-gap: var(--space-2); --badge-padding: var(--space-1) var(--space-2); --inline-card-padding: var(--space-3) var(--space-4); /* ============================================================ * 4. LAYOUT TOKENS * ============================================================ */ /* --- Breakpoints (used in @media queries, not as custom props) --- * --bp-mobile: 480px * --bp-tablet: 768px * --bp-desktop: 1024px * --bp-wide: 1280px * * CSS custom properties cannot be used in @media conditions. * These values are documented here and used as literals in * @media rules throughout components.css. * ------------------------------------------------------------ */ /* --- Container Widths --- */ --container-narrow: 680px; --container-wide: 1080px; --container-full: 1280px; /* --- Grid --- */ --grid-columns: 12; --grid-gap: var(--space-4); --grid-gap-lg: var(--space-6); /* --- Z-Index Scale --- */ --z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50; /* ============================================================ * 5. EFFECT TOKENS * ============================================================ */ /* --- Shadows --- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05); /* --- Border Radii --- */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-full: 9999px; /* --- Transitions --- */ --transition-base: 0.2s ease; --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; /* --- Focus Ring --- */ --focus-ring: 0 0 0 3px rgba(74, 111, 165, 0.4); /* --- Opacity --- */ --opacity-disabled: 0.5; --opacity-muted: 0.7; /* --- Touch Target (accessibility minimum) --- */ --touch-target: 44px; } /* ============================================================ * 6. PRINT OVERRIDES * ============================================================ */ @media print { :root { --surface-primary: #ffffff; --surface-secondary: #ffffff; --surface-elevated: #ffffff; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --text-primary: #000000; --text-secondary: #333333; --text-muted: #666666; --border-default: #cccccc; --border-strong: #999999; --card-padding: var(--space-3); --page-margin: 0; } }