:root {
  color-scheme: light;

  /* Whittr palette. Deep teal is the sole action accent. */
  --color-ink: #0F1216;
  --color-ink-secondary: #4B5961;
  --color-accent: #0E2A36;
  --color-ocean: #2E6FA3;
  --color-pearl: #EEF3F5;
  --color-paper: #F6F2EA;
  --color-shell: #E8D9BC;
  --color-companion: #2E6FA3;
  --color-glow: #E1C78A;
  --color-atmosphere: #D7E6F2;
  --color-progress-matte: #D9E0E2;
  --color-progress-soft-sheen: #D7E6F2;
  --color-progress-brightening: #A9CDE3;
  --color-progress-luminous: #6DA6C8;
  --color-progress-full-glow: #2E6FA3;
  --color-border: rgb(14 42 54 / 0.2);
  --color-border-strong: rgb(14 42 54 / 0.45);
  --color-focus-ring: #0E2A36;
  --color-error: #8B2F2F;

  --shadow-tinted: 0 18px 56px rgb(14 42 54 / 0.16);
  --shadow-tinted-soft: 0 10px 32px rgb(46 111 163 / 0.12);
  --shadow-inset-highlight: inset 0 1px 0 rgb(246 242 234 / 0.72);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 7rem;

  /* Shape rule: cards 18px, controls pill, fields 12px. */
  --radius-card: 18px;
  --radius-control: 999px;
  --radius-field: 12px;

  --font-display: Georgia, 'Times New Roman', Times, serif;
  --font-body: 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --type-display-1: clamp(2.65rem, 5.2vw, 5.6rem);
  --type-display-2: clamp(2.2rem, 4vw, 4.4rem);
  --type-display-3: clamp(1.75rem, 3vw, 3.25rem);
  --type-body: clamp(1rem, 0.25vw + 0.94rem, 1.125rem);
  --type-small: clamp(0.82rem, 0.16vw + 0.79rem, 0.92rem);
  --type-label: 0.78rem;
  --leading-display: 1.08;
  --leading-body: 1.62;
  --tracking-display: -0.035em;

  --duration-fast: 160ms;
  --duration-base: 240ms;
  /* Panel-scale UI motion. Scroll-driven layers use no transition at all. */
  --duration-scene: 260ms;
  --ease-material: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-gentle: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* System z bands only: world 0, material 10, content 20, controls 30, header 40. */
  --z-world: 0;
  --z-material: 10;
  --z-content: 20;
  --z-controls: 30;
  --z-header: 40;

  --cinematic-length: 5200px;
  --timeline-progress: 0;
  --camera-push: 0;
  --camera-scale: 1;
  --parallax-x: 0px;
  --parallax-y: 0px;
  --shell-open: 0;
  --shell-left-x: -8%;
  --shell-right-x: 8%;
  --shell-y: 0%;
  --pearl-progress: 0;
  --pearl-mix: 0;
  --pearl-x: 0px;
  --pearl-y: 0px;
  --pearl-scale: 1;
  --glim-visibility: 0;
  --glim-x: 0px;
  --glim-y: 0px;
  --focus-tint: 0;
  --intro-opacity: 1;
  --intro-offset: 0px;
  --companion-opacity: 0;
  --companion-offset: 28px;
  --routine-opacity: 0;
  --routine-offset: 28px;
  --progress-opacity: 0;
  --progress-offset: 28px;
  --rail-progress: 0;
  --rail-offset: 26px;
  --final-progress: 0;
  --final-offset: 28px;

  --environment-dawn-opacity: 1;
  --environment-guide-opacity: 0;
  --environment-underwater-opacity: 0;
  --environment-bloom-opacity: 0;
  --environment-portrait-opacity: 0;
  --environment-finale-opacity: 0;
  --pearl-matte-opacity: 1;
  --pearl-soft-sheen-opacity: 0;
  --pearl-brightening-opacity: 0;
  --pearl-luminous-opacity: 0;
  --pearl-full-glow-opacity: 0;
  --glim-quiet-opacity: 1;
  --glim-helpful-opacity: 0;
  --glim-guide-opacity: 0;
  --glim-celebration-opacity: 0;
  --glim-master-opacity: 0;
  --glim-resting-opacity: 0;
}