/* ================================================================= DESIGN SYSTEM V5 - Te Kete Ako Educational Resources Source of Truth: DESIGN_BRIEF.md "Beautiful, Minimalist, Print-First, Modern" ================================================================= */ :root { /* Core Palette - Te Kete Ako Cultural Colors * Hex values are the canonical source of truth (sRGB, all browsers). * oklch equivalents below enable wide-gamut P3 rendering on supported * screens and allow future relative-color: oklch(from var(--x) calc(l+0.1) c h). * Conversion: https://oklch.com/ */ --color-primary: #0f172a; /* Rich Navy (Heritage) */ --color-secondary: #0ea5e9; /* Sky Blue (Ocean) */ --color-accent: #f59e0b; /* Amber (Sun) */ --color-maori-red: #c2410c; /* Traditional Earth Red */ --color-earth: #78350f; /* Deep Earth Brown */ --color-forest: #065f46; /* Deep Emerald (Ngahere) */ --color-cultural-teal: #14b8a6; /* Cultural Teal */ --color-cultural-gold: #d97706; /* Cultural Gold — defined 2026-08-25; consumed by 22 files whose background: declarations were silently dead before this line existed */ /* Neutral Spectrum */ --color-base-50: #f8fafc; --color-base-100: #f1f5f9; --color-base-200: #e2e8f0; --color-base-300: #cbd5e1; --color-base-400: #94a3b8; --color-base-500: #64748b; --color-base-600: #475569; --color-base-700: #334155; --color-base-800: #1e293b; --color-base-900: #0f172a; /* Enhanced Cultural Palette */ --color-cultural-light: #f0fdf4; --color-cultural-accent: #ecfeff; --color-warmth: #fffbeb; --color-nature: #f0fdf4; /* Semantic Layers */ --color-background: #ffffff; --color-surface: #ffffff; --color-black: #020617; --color-card-hover: var(--color-base-50); --color-forest-deep: #0d2818; --color-text-primary: var(--color-base-900); --color-text-secondary: var(--color-base-600); --color-text-muted: var(--color-base-400); --color-border: var(--color-base-200); --color-border-light: var(--color-base-100); /* Spacing Tokens (SaaS Standard) */ --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 */ --space-4xl: 6rem; /* 96px */ /* Spacing aliases for semantic use */ --spacing-unit: var(--space-sm); --spacing-gutter: var(--space-md); --spacing-section: var(--space-3xl); /* ================================================================= CONSCIOUSNESS-RESPONSIVE FRAMEWORK v5.0 Adapts to learner's spiritual/emotional state (mauri) in real-time ================================================================= */ /* Mauri State: High Energy/Confidence */ --mauri-high-primary: #2c5f41; /* Deep forest energy */ --mauri-high-accent: #40e0d0; /* Vibrant teal growth */ --mauri-high-background: #ecfdf5; /* Flourishing nature */ --mauri-high-glow: 0 0 20px rgba(64, 224, 208, 0.3); /* Mauri State: Balanced/Learning */ --mauri-balanced-primary: #00b0b9; /* Ocean wisdom */ --mauri-balanced-accent: #f5a623; /* Golden insight */ --mauri-balanced-background: #f0f8f0; /* Gentle learning space */ --mauri-balanced-glow: 0 0 15px rgba(0, 176, 185, 0.25); /* Mauri State: Low/Healing Needed */ --mauri-healing-primary: #8b6f47; /* Grounding earth */ --mauri-healing-accent: #d83c3e; /* Gentle warmth */ --mauri-healing-background: #fef7ed; /* Nurturing cream */ --mauri-healing-glow: 0 0 25px rgba(139, 111, 71, 0.4); /* Mauri State: Spiritual Connection */ --mauri-spiritual-primary: #4a154b; /* Deep spiritual purple */ --mauri-spiritual-accent: #c084fc; /* Ethereal light purple */ --mauri-spiritual-background: #faf5ff; /* Sacred space */ --mauri-spiritual-glow: 0 0 30px rgba(192, 132, 252, 0.5); /* Cultural Consciousness Levels */ --consciousness-beginner: linear-gradient(135deg, #f0f8f0, #e8f4f8); --consciousness-learning: linear-gradient(135deg, #ecfdf5, #40e0d0); --consciousness-connected: linear-gradient(135deg, #2c5f41, #00b0b9); --consciousness-awakened: linear-gradient(135deg, #4a154b, #c084fc); /* Typography - Refined */ --font-display: "Merriweather", Georgia, serif; --font-headings: "Outfit", "Montserrat", sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-special: "Merriweather", serif; /* Layout */ --content-width: 1200px; --container-width: 1200px; --sidebar-width: 280px; --header-height: 75px; /* Shadows & Effects - Softer, excessive diffusions */ --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.03); --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.06); --shadow-strong: 0 16px 48px rgba(0, 0, 0, 0.12); --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07); /* Z-Index Layers - Unified System * ───────────────────────────────── * Tier 1: Local component stacking (0–50) * Tier 2: Page-chrome (100–101) * Tier 3: Navigation / mega-menu (1000–1100) * Tier 4: Modals / dialogs (9000–9999) * Tier 5: Supreme (skip-to-content) (10000) * ───────────────────────────────────────────── * IMPORTANT: --z-sidebar (1000) is immutable per CLAUDE.md. */ /* Tier 1: Local stacking */ --z-negative: -1; --z-normal: 1; --z-elevated: 10; /* cards, hover states */ --z-floating: 50; /* popovers, inline tooltips */ /* Tier 2: Page chrome */ --z-chrome: 100; /* header, sidebar, footer */ --z-dropdown: 101; /* nav dropdowns, just above chrome */ /* Tier 3: Navigation / persistent UI */ --z-nav: 1000; /* main navigation, mega-menu, persistent sidebar */ --z-nav-sub: 1050; /* navigation submenus */ --z-nav-overlay: 1100; /* navigation backdrop overlays */ /* Tier 4: Modal layer */ --z-modal-backdrop: 9000; /* full-screen semi-transparent backdrops */ --z-modal: 9999; /* modal content, critical dialogs */ /* Tier 5: Supreme */ --z-supreme: 10000; /* skip-to-content, forced system overlays */ /* Legacy aliases (kept for backward compatibility) */ --z-header: var(--z-chrome); --z-sticky: var(--z-chrome); --z-toast: var(--z-nav); /* notification toasts sit above nav */ --z-critical: var(--z-nav); --z-overlay: var(--z-modal); --z-system: var(--z-modal); --z-pdf-viewer: var(--z-modal); --z-notification: var(--z-nav); /* Glassmorphism Tokens */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: 1px solid rgba(255, 255, 255, 0.5); --glass-blur: blur(12px); --glass-shimmer: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%); /* Border Radius - Classy Straight */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 9999px; /* Kept for legacy, but discouraged for main UI */ /* TKA Glass — THE canonical recipe for floating chrome (Tobias ruling 2026-07-12): header dropdowns, sidebar rail + mobile drawer, app panels/docks (mindmap etc). Square corners always (2026-07-11 square-corners ruling). Use these tokens; never hand-roll rgba/blur glass values. Fallback token is for @supports not (backdrop-filter) blocks. */ --tka-glass-bg: rgba(248, 250, 252, 0.8); --tka-glass-bg-opaque: rgba(248, 250, 252, 0.97); --tka-glass-blur: blur(16px) saturate(160%); --tka-glass-border: 1px solid rgba(255, 255, 255, 0.5); --tka-glass-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(255, 255, 255, 0.5) inset; /* Transitions */ --transition-fast: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); --transition-medium: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); --transition-slow: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); /* Explicit interactive transition — use instead of 'transition: all' to avoid triggering paint/layout on every property. Only GPU-composited or cheaply-painted properties are listed here. */ --transition-interactive: background-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast); /* * Canonical Responsive Breakpoints (audit #47) * Note: CSS custom properties cannot be used inside @media queries. * Use these values directly. Avoid one-off breakpoints. * * --bp-sm: 480px mobile portrait * --bp-md: 768px tablet / large mobile * --bp-lg: 1024px desktop / laptop * * Examples: * @media (max-width: 480px) { ... } * @media (max-width: 768px) { ... } * @media (min-width: 1024px) { ... } */ } /* * OKLCH Progressive Enhancement (audit #52) * * Overrides the hex palette with oklch() values on browsers that support it * (Chrome 111+, Firefox 113+, Safari 15.4+, Edge 111+ — ~97% global). * On older browsers the hex fallbacks above apply unchanged. * * Benefits: * - Perceptually uniform lightness (L axis) for consistent contrast ratios * - P3 wide-gamut rendering on supported displays * - Enables CSS relative-color syntax in future: * oklch(from var(--color-primary) calc(l + 0.1) c h) */ @supports (color: oklch(0 0 0)) { :root { /* Core palette — oklch(L C H) conversions */ --color-primary: oklch(0.18 0.05 264); /* #0f172a — navy heritage */ --color-secondary: oklch(0.66 0.18 217); /* #0ea5e9 — sky blue ocean */ --color-accent: oklch(0.75 0.17 83); /* #f59e0b — amber sun */ --color-maori-red: oklch(0.50 0.18 39); /* #c2410c — earth red */ --color-earth: oklch(0.40 0.13 54); /* #78350f — deep brown */ --color-forest: oklch(0.38 0.12 163); /* #065f46 — deep emerald */ --color-cultural-teal: oklch(0.71 0.13 184); /* #14b8a6 — cultural teal */ --color-cultural-gold: oklch(0.66 0.15 65); /* #d97706 — cultural gold */ /* Neutral spectrum — uniform L-axis steps */ --color-base-50: oklch(0.985 0.006 241); --color-base-100: oklch(0.967 0.008 241); --color-base-200: oklch(0.928 0.013 241); --color-base-300: oklch(0.873 0.020 241); --color-base-400: oklch(0.715 0.033 241); --color-base-500: oklch(0.554 0.043 241); --color-base-600: oklch(0.446 0.045 250); --color-base-700: oklch(0.363 0.042 258); --color-base-800: oklch(0.258 0.048 264); --color-base-900: oklch(0.18 0.05 264); } } @media (max-width: 1024px) { :root { --header-height: 72px; } }