:root {
  --brand-name: "ZI\00B2 Kids";

  --sky-0: #D7E6F4;
  --sky-1: #EAF1F7;
  --sky-2: #FBF3E8;
  --horizon: #FFE2B0;
  --ink: #14203A;
  --ink-soft: #46556F;
  --ink-faint: #5C6A80;
  --surface: #FFFFFF;
  --surface-2: #F4F7FA;
  --line: rgba(20, 32, 58, 0.13);
  --line-strong: rgba(20, 32, 58, 0.26);
  --accent: #F0A12A;
  --accent-deep: #9A5200;
  --accent-ink: #27160A;
  --night: #0C1527;
  --night-ink: #E9EFF8;

  --shadow-1: 0 1px 2px rgba(20, 32, 58, 0.06), 0 2px 8px rgba(20, 32, 58, 0.05);
  --shadow-2: 0 2px 6px rgba(20, 32, 58, 0.07), 0 14px 38px rgba(20, 32, 58, 0.10);
  --shadow-3: 0 8px 20px rgba(20, 32, 58, 0.10), 0 34px 80px rgba(20, 32, 58, 0.16);
  --glow: 0 0 0 1px rgba(240, 161, 42, 0.35), 0 10px 44px rgba(240, 161, 42, 0.22);

  --font-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --font-text: "Literata", Georgia, serif;

  --fs-xs: clamp(0.78rem, 0.755rem + 0.11vw, 0.85rem);
  --fs-sm: clamp(0.9rem, 0.865rem + 0.17vw, 1rem);
  --fs-md: clamp(1.02rem, 0.975rem + 0.22vw, 1.14rem);
  --fs-lg: clamp(1.18rem, 1.08rem + 0.5vw, 1.46rem);
  --fs-xl: clamp(1.46rem, 1.24rem + 1.05vw, 2.1rem);
  --fs-2xl: clamp(1.95rem, 1.5rem + 2.2vw, 3.1rem);
  --fs-3xl: clamp(2.5rem, 1.66rem + 3.9vw, 4.5rem);
  --fs-4xl: clamp(3rem, 1.8rem + 5.4vw, 5.8rem);

  --lh-tight: 1.02;
  --lh-head: 1.1;
  --lh-body: 1.62;
  --measure: 34ch;
  --measure-wide: 54ch;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 14px;
  --sp-4: 22px;
  --sp-5: 34px;
  --sp-6: clamp(40px, 5vw, 60px);
  --sp-7: clamp(60px, 8vw, 104px);
  --sp-8: clamp(84px, 12vw, 168px);

  --r-1: 8px;
  --r-2: 14px;
  --r-3: 22px;
  --r-4: 34px;
  --r-pill: 999px;

  --container: min(1180px, 100% - 2 * var(--sp-4));
  --tap: 44px;

  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 200ms;
  --dur-2: 520ms;
  --dur-3: 900ms;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --z-sky: 0;
  --z-content: 1;
  --z-nav: 50;
  --z-menu: 60;
}

[data-ground="night"] {
  --sky-0: #070C1A;
  --sky-1: #0E1830;
  --sky-2: #1E1B2E;
  --horizon: #4A2E1C;
  --ink: #E9EFF8;
  --ink-soft: #AEBCD3;
  --ink-faint: #9FADC4;
  --surface: #121C33;
  --surface-2: #0E1729;
  --line: rgba(233, 239, 248, 0.14);
  --line-strong: rgba(233, 239, 248, 0.3);
  --accent: #FFBC4D;
  --accent-deep: #FFD08A;
  --accent-ink: #1B1205;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 14px 38px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 34px 80px rgba(0, 0, 0, 0.55);
  --glow: 0 0 0 1px rgba(255, 188, 77, 0.3), 0 10px 44px rgba(255, 188, 77, 0.18);
}