/* * tokens.css — QMB Portal Design System v1.1 "Sunflower Field" * File: assets/css/tokens.css * * AUTHORITATIVE SOURCE for all CSS custom properties. * Load BEFORE any other stylesheet. All other :root blocks * in landing.css and utilities.css are superseded by this file. * * Architect: Claude · Session S001 · 2026-05-24 * Commander ratified: Mario Oscar Pureco-Razo * DEC-QMBP-S001 · ADG-QMBP-01 logged (components/ path fix deferred) * * DO NOT add raw hex values anywhere else in the codebase. * DO NOT reference #0D2C4F (blacklisted legacy). * DO NOT import XODA palette tokens here. */ :root { /* ========================================================= BRAND PALETTE — v1.1 Sunflower Field Source: QMB_PORTAL_DESIGN_SYSTEM_S01_v1_1_PROPOSAL.md ========================================================= */ /* Primary semantic tokens */ --color-sunflower: #FFD93D; /* v1.1 confirmed · was #F4D03F (legacy) */ --color-tangerine: #FF8A4C; /* v1.1 confirmed · was #E74C3C (alarm-red, blacklisted) */ --color-cloud: #F1F5F9; /* modal backdrops, surface overlays */ /* Sunflower scale */ --color-sunflower-light: #FFE97A; --color-sunflower-dark: #F1C40F; /* Tangerine scale */ --color-tangerine-light: #FFB088; --color-tangerine-dark: #E8732E; /* Neutrals */ --color-white: #FFFFFF; --color-light-gray: #F8F9FA; --color-medium-gray: #6C757D; --color-dark-gray: #343A40; --color-black: #212529; /* Semantic status */ --color-success: #28A745; --color-info: #5DADE2; --color-warning: #FFC107; --color-danger: #DC3545; /* Extended accent palette (activity surfaces) */ --color-blue: #3b82f6; --color-pink: #ec4899; --color-green: #10b981; --color-amber: #f59e0b; --color-purple: #8b5cf6; --color-teal: #11998e; --color-robin: #5BA3F5; /* Phonics EN + ES subject color · DEC-QMBP-S003-CD-01 */ /* ========================================================= SUBJECT IDENTITY NAMESPACE — DEC-QMBP-S003-CD-01 · S003 Activity pages reference these vars, never raw hex. Application: header top-border, level badge bg, progress bar fill. DO NOT apply to: header bg, activity title text, game area body, action buttons, or feedback elements (feedback uses Spring Mint / Soft Rose — separate semantic layer). ========================================================= */ /* Three tokens locked — deploy now */ --color-subject-phonics: var(--color-robin); /* Phonics EN + ES unified */ --color-subject-sel: var(--color-tangerine); /* Social-Emotional */ --color-subject-art: var(--color-sunflower); /* Art */ /* Four tokens live — CMD-RATIFY-S003-01b · S007 · 2026-05-26 */ --color-subject-writing: var(--color-quill); --color-subject-math: var(--color-pine); --color-subject-science: var(--color-lagoon); --color-subject-social: var(--color-terracotta); --color-subject-skills: var(--color-plum); /* CMD-RATIFY S007 · 2026-05-26 */ /* New palette tokens — ratified CMD-RATIFY-S003-01b · S007 · 2026-05-26 All values AAA vs #FFFFFF. SO audit DEC-QMBP-S006-03. */ --color-quill: #3730A3; /* indigo-800 · Writing · CR 9.92:1 ✅ AAA */ --color-pine: #115E59; /* teal-800 · Math · CR 7.60:1 ✅ AAA */ --color-lagoon: #0C4A6E; /* sky-900 · Science · CR 9.46:1 ✅ AAA · ΔL vs Robin 0.289 ✅ */ --color-terracotta: #9A3412; /* orange-800 · Social · CR 7.30:1 ✅ AAA · hue-distinct vs Danger ✅ */ --color-plum: #6B21A8; /* purple-800 · Skills · CR 8.71:1 ✅ AAA · CMD-RATIFY S007 */ /* ========================================================= LEGACY ALIASES — backward compat for existing CSS Remove alias when the consuming file is migrated to v1.1 semantic tokens above. ========================================================= */ --golden: var(--color-sunflower); --golden-light: var(--color-sunflower-light); --golden-dark: var(--color-sunflower-dark); --orange: var(--color-tangerine); --orange-light: var(--color-tangerine-light); --orange-dark: var(--color-tangerine-dark); --white: var(--color-white); --light-gray: var(--color-light-gray); --medium-gray: var(--color-medium-gray); --dark-gray: var(--color-dark-gray); --black: var(--color-black); --success: var(--color-success); --info: var(--color-info); --warning: var(--color-warning); --danger: var(--color-danger); --primary-blue: var(--color-blue); --accent-pink: var(--color-pink); --accent-green: var(--color-green); --accent-orange: var(--color-amber); /* ========================================================= TYPOGRAPHY — v1.1 Fredoka: display / headings / child-facing labels Lexend: body / parent-facing / instructional copy Nunito: legacy fallback (activity pages not yet migrated) ========================================================= */ --font-display: 'Fredoka', 'Nunito', cursive, sans-serif; --font-body: 'Lexend', 'Trebuchet MS', sans-serif; --font-mono: 'Courier New', monospace; /* Legacy aliases */ --font-primary: var(--font-display); --font-secondary: var(--font-body); --font-tertiary: 'Quicksand', 'Helvetica', sans-serif; /* activity-specific; phase out */ /* Type scale */ --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 */ /* ========================================================= SPACING ========================================================= */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ --spacing-xxl: var(--spacing-2xl); /* legacy alias */ /* ========================================================= BORDER RADIUS ========================================================= */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-xxl: var(--radius-2xl); /* legacy alias */ --radius-full: 9999px; /* ========================================================= SHADOWS ========================================================= */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* ========================================================= TRANSITIONS ========================================================= */ --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ========================================================= SEMANTIC SURFACE TOKENS ========================================================= */ --bg-primary: var(--color-white); --bg-secondary: var(--color-light-gray); --bg-overlay: var(--color-cloud); --text-primary: var(--color-dark-gray); --text-secondary: var(--color-medium-gray); /* ========================================================= LAYOUT ========================================================= */ --container-max-width: 1200px; --canvas-max-size: min(400px, 90vw); /* ========================================================= 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; /* ========================================================= BREAKPOINTS (reference values — use in @media directly) ========================================================= */ --breakpoint-xs: 320px; --breakpoint-sm: 768px; --breakpoint-md: 1024px; --breakpoint-lg: 1200px; } /* ========================================================= SURFACE OVERRIDE — PreK–2 Applied via on PreK/K/1/2 pages. Warmer, rounder, larger type. Fredoka dominates both stacks. Migration to this class is S002+ scope. ========================================================= */ body.surface-prek2 { --font-display: 'Fredoka', cursive, sans-serif; --font-body: 'Fredoka', cursive, sans-serif; --font-primary: var(--font-display); --font-secondary: var(--font-body); --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-2xl: 2rem; --text-base: 1.0625rem; /* slightly larger base for early readers */ }