/* ========================================================================== Kiddohub — Design Tokens (Phase 14) Single source of truth for colour, type, spacing, radius, shadow, motion. These extend the original style.css tokens. style.css remains the base; this file introduces the professional 4-personality design system. ========================================================================== */ :root { /* ---- Brand palette (controlled, trustworthy) ---- */ --kh-primary: #234e70; /* deep navy — brand, headings, parent */ --kh-primary-dark: #1a3c56; --kh-primary-light: #eaf1f7; --kh-explorer: #3a7bd5; /* explorer blue — primary actions */ --kh-explorer-dark: #2c62ad; --kh-explorer-light: #e8f1fc; --kh-teal: #38a3a5; /* playful teal — FlagMap accent */ --kh-teal-dark: #2c8486; --kh-teal-light: #e6f4f4; --kh-sunshine: #f4c95d; /* celebratory amber */ --kh-sunshine-dark: #c99a2e; --kh-coral: #f47c6c; /* warm coral — playful highlight */ --kh-coral-dark: #d95d4c; --kh-coral-light: #fdeeea; --kh-violet: #8b5cf6; --kh-leaf: #4caf7d; /* ---- Neutrals & surfaces ---- */ --kh-bg-soft: #eef7fb; /* cool soft background */ --kh-bg-warm: #fffdf8; /* warm off-white */ --kh-bg-parent: #f7f8fa; /* restrained parent/admin bg */ --kh-surface: #ffffff; --kh-border: #dde5ec; --kh-border-soft: #e9eef3; /* ---- Text ---- */ --kh-text-primary: #243142; --kh-text-secondary: #667085; --kh-text-on-primary: #ffffff; /* ---- Semantic feedback ---- */ --kh-success-bg: #e7f6ec; --kh-success-text: #1c6b3a; --kh-try-bg: #fff7ed; --kh-try-text: #9a4a12; --kh-info-bg: #eaf3fc; --kh-info-text: #2456a6; --kh-danger: #d64545; /* ---- Typography ---- */ --kh-font-display: "Fredoka", "Segoe UI", system-ui, sans-serif; --kh-font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; --kh-text-hero: clamp(2.25rem, 5vw, 3.25rem); --kh-text-page: clamp(1.75rem, 3.4vw, 2.5rem); --kh-text-section: clamp(1.4rem, 2.4vw, 1.75rem); --kh-text-card: 1.2rem; --kh-text-body: 1.05rem; --kh-text-small: 0.92rem; /* ---- Spacing scale (4px base) ---- */ --kh-space-xs: 0.375rem; --kh-space-sm: 0.625rem; --kh-space-md: 1rem; --kh-space-lg: 1.5rem; --kh-space-xl: 2.25rem; --kh-space-2xl: 3.5rem; /* ---- Radius ---- */ --kh-radius-sm: 0.5rem; --kh-radius-md: 0.875rem; --kh-radius-lg: 1.25rem; --kh-radius-xl: 1.75rem; --kh-radius-pill: 999px; /* ---- Shadows ---- */ --kh-shadow-xs: 0 1px 2px rgba(36, 49, 66, 0.06); --kh-shadow-sm: 0 2px 8px rgba(36, 49, 66, 0.08); --kh-shadow-md: 0 14px 34px rgba(36, 49, 66, 0.10); --kh-shadow-lg: 0 24px 60px rgba(36, 49, 66, 0.14); /* ---- Layout ---- */ --kh-max-width: 76rem; /* 1216px content cap */ --kh-max-reading: 46rem; /* ---- Motion ---- */ --kh-ease: cubic-bezier(0.22, 1, 0.36, 1); --kh-speed: 0.18s; /* ---- Touch target ---- */ --kh-touch: 2.75rem; /* 44px */ } /* ========================================================================== Personality scopes Each major area toggles a scope class on (set per-template via the `body_class` block). Scopes re-tint accent variables without changing the shared structure. ========================================================================== */ /* A. Kiddohub Portal — professional, calm, warm, premium */ body.kh-scope-portal { --scope-accent: var(--kh-primary); --scope-accent-dark: var(--kh-primary-dark); --scope-accent-light: var(--kh-primary-light); background-color: var(--kh-bg-warm); } /* B. FlagMap Family — colourful, exploratory, playful */ body.kh-scope-flagmap { --scope-accent: var(--kh-teal); --scope-accent-dark: var(--kh-teal-dark); --scope-accent-light: var(--kh-teal-light); background-color: var(--kh-bg-soft); } /* C. Parent — professional, calm, structured, readable */ body.kh-scope-parent { --scope-accent: var(--kh-primary); --scope-accent-dark: var(--kh-primary-dark); --scope-accent-light: var(--kh-primary-light); background-color: var(--kh-bg-parent); } /* D. Admin — clean, minimal, data-oriented */ body.kh-scope-admin { --scope-accent: #3a4756; --scope-accent-dark: #2b3541; --scope-accent-light: #eef1f4; background-color: var(--kh-bg-parent); } /* Default scope fallback */ :root { --scope-accent: var(--kh-explorer); --scope-accent-dark: var(--kh-explorer-dark); --scope-accent-light: var(--kh-explorer-light); }