/* ============================================================ Kidora Design Tokens ------------------------------------------------------------ Two themes share the same variable names so components don't have to know which one is active. Switch by setting an attr on the root element: ... // app shell + tablet ... // compliance + checklist Note: the attribute is `data-design` (not `data-theme`) because the legacy app already uses `data-theme="dark"|"light"` for the old dark-mode system. Renaming here lets both coexist during the modal-by-modal migration. The handoff README calls it data-theme; this is a one-name swap, semantics are identical. Both themes share the coral primary (#F26B4F) so the brand feel stays consistent across the route boundary. Author: Kidora design refresh, May 2026. ============================================================ */ /* ---- Brand-wide constants (do not vary by theme) ----------- */ :root { /* The KIDORA letter-block colors. Used as decorative accents in the logo lockups; not for UI surfaces. */ --kidora-block-k: #F26B4F; /* coral — K */ --kidora-block-i: #F5C443; /* sunshine— I */ --kidora-block-d: #5FA463; /* sage — D */ --kidora-block-o: #3D7AC9; /* sky — O */ --kidora-block-r: #9B6B9E; /* plum — R */ --kidora-block-a: #F26B4F; /* coral — A */ /* Motion */ --k-ease: cubic-bezier(0.32, 0.72, 0, 1); --k-dur-fast: 140ms; --k-dur-base: 220ms; --k-dur-slow: 420ms; /* z-index scale */ --k-z-base: 1; --k-z-sticky: 100; --k-z-overlay: 400; --k-z-modal: 500; --k-z-toast: 700; } /* ============================================================ Theme: STORYBOOK (Direction C) Used for: App shell, Tablet Mode, Admin. Mood: soft blue & white, accessible, big-screen-readable. ============================================================ */ :root, [data-design="storybook"] { /* Surfaces */ --k-bg: #F4F7FB; --k-bg-alt: #E8EFF8; --k-surface: #FFFFFF; --k-surface-tint: #EEF4FB; /* Ink */ --k-ink: #172238; --k-ink-soft: #475569; --k-ink-muted: #6E7A8C; /* darkened from #8A95A8 to hit WCAG AA 4.5:1 on light bg */ --k-ink-on-color: #FFFFFF; /* Brand accents */ --k-coral: #F26B4F; --k-coral-soft: #FBD7CB; --k-sunshine: #FAC83A; --k-sunshine-soft: #FCEDB0; --k-sage: #5FA463; --k-sage-soft: #D0E5D2; --k-sky: #3D7AC9; --k-sky-soft: #CFDDEF; --k-plum: #7B61C7; --k-plum-soft: #D6CCEC; /* Semantic */ --k-good: #3FA561; --k-good-soft: #CFE7D6; --k-warn: #F0A93B; --k-warn-soft: #FBE2B5; --k-bad: #E5564A; --k-bad-soft: #F7CFCB; /* Primary action — the button color */ --k-primary: var(--k-sky); --k-primary-soft: var(--k-sky-soft); --k-primary-ink: var(--k-ink-on-color); /* Strokes */ --k-line: rgba(23, 34, 56, 0.10); --k-line-strong: rgba(23, 34, 56, 0.18); /* Type */ --k-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --k-font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Radii — Storybook is more rounded */ --k-r-sm: 12px; --k-r-md: 18px; --k-r-lg: 28px; --k-r-xl: 36px; --k-r-pill: 999px; /* Shadows */ --k-shadow-sm: 0 1px 2px rgba(23, 34, 56, 0.06); --k-shadow: 0 8px 22px rgba(23, 34, 56, 0.08); --k-shadow-lg: 0 24px 56px rgba(23, 34, 56, 0.14); } /* Dark-mode override removed 2026-05-22. KIDORA is light-only. See git history at this commit if dark mode needs to come back. */ /* ============================================================ Theme: SUNNY (Direction A — "Sunny Schoolhouse") Used for: Auth/login, Compliance Score modal, Fire Safety checklist, Sunshine Sprouts demo page, and any moment that calls for warmth over neutrality. Mood: cream paper, coral primary, friendly KIDORA-block DNA. ============================================================ */ [data-design="sunny"] { /* Surfaces */ --k-bg: #FFF8EC; --k-bg-alt: #FBEFD8; --k-surface: #FFFFFF; --k-surface-tint: #FFF3DA; /* Ink */ --k-ink: #2A2620; --k-ink-soft: #5C544A; --k-ink-muted: #6F6859; /* darkened from #8A8275 to hit WCAG AA 4.5:1 on cream bg */ --k-ink-on-color: #FFFFFF; /* Brand accents */ --k-coral: #F26B4F; --k-coral-soft: #FBD7CB; --k-sunshine: #F5C443; --k-sunshine-soft: #FBE5A8; --k-sage: #7BAE7F; --k-sage-soft: #D2E6D4; --k-sky: #5BA3D0; --k-sky-soft: #C8E0EF; --k-plum: #9B6B9E; --k-plum-soft: #E1D0E2; /* Semantic */ --k-good: #5E9E63; --k-good-soft: #D8ECDA; --k-warn: #E2A23A; --k-warn-soft: #FBE5A8; --k-bad: #D55747; --k-bad-soft: #F8D5CF; /* Sunny's primary action is coral — not sky. */ --k-primary: var(--k-coral); --k-primary-soft: var(--k-coral-soft); --k-primary-ink: var(--k-ink-on-color); /* Strokes */ --k-line: rgba(42, 38, 32, 0.10); --k-line-strong: rgba(42, 38, 32, 0.18); /* Type */ --k-font-sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --k-font-display: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Radii — Sunny is slightly less round than Storybook */ --k-r-sm: 10px; --k-r-md: 16px; --k-r-lg: 24px; --k-r-xl: 32px; --k-r-pill: 999px; /* Shadows */ --k-shadow-sm: 0 1px 2px rgba(42, 38, 32, 0.06); --k-shadow: 0 6px 18px rgba(42, 38, 32, 0.08); --k-shadow-lg: 0 20px 48px rgba(42, 38, 32, 0.12); } /* ============================================================ Nested scope. Useful for showing a Sunny modal on top of a Storybook shell without rewriting the whole page's theme attribute. ...
...
============================================================ */