/* kidenv design system — the polished, kid-friendly baseline every app starts from. Build to these tokens and components: it's how a generated app reaches "app-store" polish. See DESIGN.md for the rules and CHECKLIST.md for the gate. Vanilla CSS, zero deps. */ :root { color-scheme: light dark; /* --- Palette: bright and friendly, never harsh. Tuned for AA contrast on --surface. --- */ --brand: #5b4bff; /* primary action / identity */ --brand-ink: #ffffff; /* text on --brand */ --accent: #ff5fa2; /* playful highlight */ --sun: #ffb020; /* warm secondary (amber) */ /* Feedback colors — encouraging, not shaming. "Try again" is a calm slate, never red. */ --go: #1faa59; /* start / correct / success (green) */ --go-ink: #ffffff; --stop: #ff6b5e; /* stop / pause (warm coral, not alarm-red) */ --stop-ink: #3a0d09; --calm: #6b7a99; /* gentle "try again" — neutral, low-anxiety */ /* Surfaces & ink (light theme defaults; dark overrides below). */ --surface: #fbf7ff; /* page background */ --card: #ffffff; /* raised surface */ --ink: #1b1633; /* primary text — ~13:1 on --surface */ --ink-soft: #4b4668; /* secondary text — ~6:1 on --surface */ --line: #e7e0f5; /* hairlines / borders */ /* Shape, space, type. Generous and rounded reads as friendly. */ --radius: 18px; --radius-lg: 28px; --tap-min: 64px; /* min touch target for kid hands (> WCAG 44px) */ --tap-primary: clamp(72px, 11vh, 104px); /* hero buttons */ --gap: clamp(0.75rem, 2.5vw, 1.25rem); --pad: clamp(1rem, 4vw, 2rem); --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --shadow: 0 6px 20px rgba(40, 20, 90, 0.12); --shadow-lg: 0 14px 40px rgba(40, 20, 90, 0.20); } @media (prefers-color-scheme: dark) { :root { --surface: #131022; --card: #1f1a38; --ink: #f3f0ff; --ink-soft:#bfb6e0; --line: #322b54; --shadow: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55); } } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; min-height: 100svh; font: clamp(16px, 2.4vw, 19px)/1.5 var(--font); color: var(--ink); background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%), var(--surface); /* Respect notches / gesture bars on phones. */ padding: max(var(--pad), env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right)) max(var(--pad), env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left)); display: grid; place-items: center; } /* --- Layout helpers --- */ .app { width: min(36rem, 100%); display: grid; gap: var(--gap); justify-items: center; text-align: center; } .stack { display: grid; gap: var(--gap); } .row { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .card { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--pad); width: 100%; } /* --- Typography --- */ h1 { font-size: clamp(2rem, 7vw, 3.25rem); line-height: 1.1; margin: 0 0 0.25em; } h2 { font-size: clamp(1.3rem, 4.5vw, 1.9rem); margin: 0 0 0.4em; } p { color: var(--ink-soft); margin: 0.4em 0; } .lead { font-size: 1.1em; color: var(--ink-soft); } /* --- Buttons: big, rounded, obvious. The core kid interaction. --- */ .btn { -webkit-tap-highlight-color: transparent; appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 800; color: var(--brand-ink); background: var(--brand); min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 clamp(1.1rem, 4vw, 1.8rem); border-radius: var(--radius); box-shadow: var(--shadow); display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease; } .btn:hover { filter: brightness(1.05); box-shadow: var(--shadow-lg); } .btn:active { transform: translateY(2px) scale(0.98); } .btn:focus-visible { outline: 4px solid color-mix(in srgb, var(--brand) 55%, white); outline-offset: 3px; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; filter: none; transform: none; } /* Big hero buttons (Start/Stop/Reset-style primary actions). */ .btn-xl { min-height: var(--tap-primary); font-size: clamp(1.1rem, 3.5vw, 1.5rem); border-radius: var(--radius-lg); padding: 0 clamp(1.5rem, 6vw, 2.5rem); } /* Semantic variants. */ .btn-go { background: var(--go); color: var(--go-ink); } .btn-stop { background: var(--stop); color: var(--stop-ink); } .btn-cool { background: var(--sun); color: #3a2600; } .btn-ghost { background: color-mix(in srgb, var(--brand) 12%, var(--card)); color: var(--ink); box-shadow: none; } /* --- Big readout (timers, scores, counters) --- */ .display { font-variant-numeric: tabular-nums; font-weight: 800; font-size: clamp(3rem, 16vw, 6rem); line-height: 1; letter-spacing: 0.02em; color: var(--ink); } /* --- Motion: opt every animation out for kids/parents who need calm. --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* A friendly little celebratory pop helper (used sparingly; honors reduced-motion above). */ @keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } } .pop { animation: pop 0.4s ease; } /* --- Settings kit --------------------------------------------------------------------------- Every app ships a tweakable Settings panel (DESIGN.md rule 12). These are the on-token building blocks: a gear button that opens a .sheet (a styled ), with big kid-friendly controls — a .range slider, a .switch toggle, and a .segmented picker — laid out as .field rows. Theme them per app, but keep the tokens so contrast/size stay correct. All animation honors reduced-motion. */ /* Round icon button (the ⚙ gear). Still meets the tap-min target. */ .btn-icon { -webkit-tap-highlight-color: transparent; appearance: none; border: 0; cursor: pointer; font: inherit; width: var(--tap-min); height: var(--tap-min); min-width: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1; border-radius: 50%; color: var(--ink); background: color-mix(in srgb, var(--brand) 12%, var(--card)); box-shadow: var(--shadow); transition: transform 0.08s ease, filter 0.15s ease; } .btn-icon:hover { filter: brightness(1.05); } .btn-icon:active { transform: scale(0.94); } .btn-icon:focus-visible { outline: 4px solid color-mix(in srgb, var(--brand) 55%, white); outline-offset: 3px; } /* Settings sheet — a centered . Use dialog.showModal()/close() to open/dismiss. */ .sheet { border: 0; padding: 0; color: var(--ink); background: transparent; max-width: min(30rem, 94vw); width: 100%; } .sheet::backdrop { background: rgba(20, 12, 45, 0.55); backdrop-filter: blur(2px); } .sheet .sheet-body { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--pad); display: grid; gap: var(--gap); text-align: left; } .sheet[open] { animation: sheet-in 0.18s ease; } @keyframes sheet-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } } /* A labelled control row. */ .field { display: grid; gap: 0.4rem; } .field > .field-label { font-weight: 800; color: var(--ink); } .field > .field-hint { font-size: 0.85em; color: var(--ink-soft); } /* Big, friendly range slider. */ .range { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; cursor: pointer; } .range:focus-visible { outline: 4px solid color-mix(in srgb, var(--brand) 55%, white); outline-offset: 4px; border-radius: var(--radius); } .range::-webkit-slider-runnable-track { height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 22%, var(--card)); } .range::-moz-range-track { height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 22%, var(--card)); } .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; margin-top: -9px; border-radius: 50%; background: var(--brand); box-shadow: var(--shadow); border: 3px solid var(--card); } .range::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); box-shadow: var(--shadow); border: 3px solid var(--card); } /* Toggle switch (e.g. Sound on/off). Markup: