/* ISAAC Pro — Brand v2.0 Design Tokens + v3 (2026 shell: dark, semantic, motion) * Source of truth: Desktop/ISAAC Pro Branding/_ISAACPro_Brand_Design_v2.0.docx * (also: doc/11_BRAND_GUIDELINES.md) * * Load this BEFORE dashboard.css. All other stylesheets and inline styles * must reference these tokens rather than hard-coding hex values, so a single * future palette tweak propagates across the whole web app. * * Naming: * --ip-* = canonical Brand v2.0 token names (use these in NEW code). * --isaac-* aliases that match the legacy v1 palette names are kept in * dashboard.css so existing pages keep rendering until a P6 cleanup pass * lifts every reference onto --ip-*. * * Theme: set on : data-theme="light" | "dark" | "auto" * "auto" follows prefers-color-scheme via [data-theme="auto"] rules below. */ :root { /* ---------- Primary brand colours ---------- */ /* Quizaac family maroon (never ISAAC classic #800000 on QuizaacOMR). */ --ip-maroon: #6B0F1A; /* navigation, headers, primary buttons */ --ip-maroon-dark: #4D0B13; /* hover/active states for maroon */ --ip-bright-red: #FF000D; /* destructive / OMR wrong overlay only */ --ip-bright-red-dark: #CC000A; /* ---------- Neutral UI colours ---------- */ --ip-white: #FFFFFF; --ip-grey-50: #F3F4F6; /* app background, alternating rows */ --ip-grey-200: #D1D5DB; /* borders, dividers, disabled */ --ip-grey-400: #9CA3AF; /* legacy muted — prefer --ip-text-muted */ --ip-grey-500: #6B7280; /* secondary text (AA on white ≥14px) */ --ip-grey-900: #1F2937; /* primary text */ /* v3 — WCAG-friendly muted text (≥4.5:1 on white for 14px body) */ --ip-text-muted: #5B6470; /* ---------- Analytics & semantic colours ---------- */ --ip-success: #4BB543; /* UI success (text/bg) */ --ip-success-bright:#00FF1A; /* image overlays / chart fills only */ --ip-orange: #FF5B00; /* moderate / at-risk (charts) */ --ip-warning: #F59E0B; /* heatmap "moderate" cell tint */ --ip-info: #1F6FB2; /* family info / links */ --ip-blue: #1F6FB2; /* chart reference lines (was #0000FF) */ --ip-blue-deep: #02066F; /* benchmark / historical comparison */ /* ---------- Warm sand borders / quiet fills (family) ---------- */ --ip-border-warm: #E8DCC4; --ip-fill-quiet: #F2EAD8; --ip-focus-ring: #F39200; /* ---------- Semantic state (surface / text / border) — light ---------- */ --ip-surface-info: #eff6ff; --ip-text-info: #1e40af; --ip-border-info: #bfdbfe; --ip-surface-success: #ecfdf5; --ip-text-success: #047857; --ip-border-success: #6ee7b7; --ip-surface-warn: #fffbeb; --ip-text-warn: #b45309; --ip-border-warn: #fcd34d; --ip-surface-danger: #fef2f2; --ip-text-danger: #991b1b; --ip-border-danger: #fecaca; /* ---------- Typography (family: Poppins titles · Inter body) ---------- */ --ip-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ip-font-title: "Poppins", var(--ip-font-family); --ip-text-title-lg: 1.375rem; /* 22px */ --ip-text-title-md: 1.125rem; /* 18px */ --ip-text-body: 1rem; /* 16px — family readability bar */ --ip-text-body-sm: 0.875rem; /* 14px */ --ip-line-tight: 1.25; --ip-line-body: 1.45; /* ---------- Spacing (8px grid) ---------- */ --ip-space-1: 8px; --ip-space-2: 16px; --ip-space-3: 24px; --ip-space-4: 32px; --ip-space-5: 40px; --ip-space-6: 48px; /* ---------- Radii (Brand v2.0 §3.3) ---------- */ --ip-radius-button: 8px; /* GLOBAL — never deviate */ --ip-radius-card: 12px; --ip-radius-pill: 999px; /* ---------- Elevation ---------- */ --ip-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.08); --ip-shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.18); /* ---------- Motion ---------- */ --ip-duration-fast: 120ms; --ip-duration-medium: 200ms; --ip-ease-standard: cubic-bezier(0.2, 0, 0, 1); --ip-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* ---------- Breakpoints (reference in JS + media queries) ---------- */ /* Phone ≤767 · Tablet 768–1279 (persistent sidebar) · Desktop ≥1280 */ --ip-bp-sm: 600px; --ip-bp-md: 768px; --ip-bp-lg: 1280px; --ip-bp-xl: 1536px; /* ---------- Z-index scale ---------- */ --ip-z-base: 0; --ip-z-sticky: 100; --ip-z-dropdown: 200; --ip-z-drawer: 1098; --ip-z-modal: 1200; --ip-z-toast: 1300; --ip-z-skip: 1400; /* ---------- Brand asset paths (relative to dashboards/) ---------- */ --ip-asset-icon: url("brand/quizaac_omr_brand_icon_ui.png"); --ip-asset-logo: url("brand/quizaac_omr_brand_logo_ui.png"); /* ---------- App shell (sidebar) — light ---------- */ --ip-sidebar-bg: var(--ip-white); --ip-sidebar-border: var(--ip-border-warm); --ip-sidebar-text: var(--ip-grey-900); --ip-sidebar-muted: var(--ip-text-muted); --ip-sidebar-active-bg: rgba(107, 15, 26, 0.08); --ip-app-bg: #FAF6EE; /* family sand / cream page canvas */ --ip-brand-cream: #FAF6EE; --ip-brand-orange: #F39200; --ip-brand-gold: #FCBF11; --ip-cta: var(--ip-maroon); --ip-cta-hover: var(--ip-maroon-dark); --ip-secondary: var(--ip-brand-orange); --ip-secondary-hover: #D97E00; --ip-bottom-nav-bg: var(--ip-white); --ip-bottom-nav-border: var(--ip-border-warm); } /* ----- Dark palette (data-theme="dark" or auto + dark OS) ----- */ [data-theme="dark"] { color-scheme: dark; --ip-white: #111827; --ip-grey-50: #1f2937; --ip-grey-200: #374151; --ip-grey-400: #9ca3af; --ip-grey-500: #d1d5db; --ip-grey-900: #f9fafb; --ip-text-muted: #d1d5db; --ip-maroon: #9f1717; --ip-maroon-dark: #7f1212; --ip-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.35); --ip-shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.5); --ip-surface-info: #1e3a5f; --ip-text-info: #bfdbfe; --ip-border-info: #3b82f6; --ip-surface-success: #14532d; --ip-text-success: #bbf7d0; --ip-border-success: #22c55e; --ip-surface-warn: #78350f; --ip-text-warn: #fde68a; --ip-border-warn: #f59e0b; --ip-surface-danger: #7f1d1d; --ip-text-danger: #fecaca; --ip-border-danger: #ef4444; --ip-sidebar-bg: #111827; --ip-sidebar-border: #374151; --ip-sidebar-text: #f9fafb; --ip-sidebar-muted: #9ca3af; --ip-sidebar-active-bg: rgba(255, 255, 255, 0.1); --ip-app-bg: #0f172a; --ip-bottom-nav-bg: #111827; --ip-bottom-nav-border: #374151; } @media (prefers-color-scheme: dark) { [data-theme="auto"] { color-scheme: dark; --ip-white: #111827; --ip-grey-50: #1f2937; --ip-grey-200: #374151; --ip-grey-400: #9ca3af; --ip-grey-500: #d1d5db; --ip-grey-900: #f9fafb; --ip-text-muted: #d1d5db; --ip-maroon: #9f1717; --ip-maroon-dark: #7f1212; --ip-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.35); --ip-shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.5); --ip-surface-info: #1e3a5f; --ip-text-info: #bfdbfe; --ip-border-info: #3b82f6; --ip-surface-success: #14532d; --ip-text-success: #bbf7d0; --ip-border-success: #22c55e; --ip-surface-warn: #78350f; --ip-text-warn: #fde68a; --ip-border-warn: #f59e0b; --ip-surface-danger: #7f1d1d; --ip-text-danger: #fecaca; --ip-border-danger: #ef4444; --ip-sidebar-bg: #111827; --ip-sidebar-border: #374151; --ip-sidebar-text: #f9fafb; --ip-sidebar-muted: #9ca3af; --ip-sidebar-active-bg: rgba(255, 255, 255, 0.1); --ip-app-bg: #0f172a; --ip-bottom-nav-bg: #111827; --ip-bottom-nav-border: #374151; } }