/* CleanViews design tokens. See docs/development/design-system.md.
   Loaded before style.css; shared by the TV and the development gallery.
   Palette roles (--ink, --mute, --solid, --plate...) remain surface-scoped in
   style.css and aerial.css. Do not alias those at :root: CSS variables resolve
   at their declaration scope and would freeze wallpaper-specific overrides. */
:root {
  /* Primitives: the existing visual vocabulary, in logical stage pixels. */
  --color-warm-white: #f6f1e7;
  --color-paper: #f4f4f1;
  --color-charcoal: #1d1a16;
  --color-black: #000;
  --color-selection-blue: #9dcaff;
  --color-selection-deep-blue: #164f91;
  --color-focus-paper: #f3f3ef;
  --color-focus-charcoal: #141618;
  --font-family-base: Manrope,Arial,sans-serif;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-28: 28px;
  --radius-32: 32px;
  --radius-48: 48px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-26: 26px;
  --font-size-28: 28px;
  --font-size-29: 29px;
  --font-size-30: 30px;
  --font-size-32: 32px;
  --font-size-34: 34px;
  --font-size-36: 36px;
  --font-size-38: 38px;
  --font-size-40: 40px;
  --font-size-42: 42px;
  --font-size-48: 48px;
  --font-size-56: 56px;
  --font-size-72: 72px;
  --font-size-88: 88px;
  --duration-120: 120ms;
  --duration-140: 140ms;
  --duration-160: 160ms;
  --duration-180: 180ms;
  --duration-220: 220ms;
  --duration-300: 300ms;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --line-height-action: 36px;
  --line-height-choice: 48px;
  --line-height-heading: 68px;
  --icon-stroke-base: 1.6;
  --icon-stroke-utility: 1.8;
  --icon-stroke-check: 2.2;
  --ease-standard: cubic-bezier(.2,.7,.2,1);

  /* Semantic: choose a role before inventing another size. */
  --selection-accent: var(--color-selection-blue);
  --selection-accent-focused: var(--color-selection-deep-blue);
  --cycle-selection-color: var(--selection-accent);
  --cycle-selection-focused-color: var(--selection-accent-focused);
  --type-status: var(--font-size-22);
  --type-caption: var(--font-size-24);
  --type-description: var(--font-size-26);
  --type-label: var(--font-size-28);
  --type-action: var(--font-size-30);
  --type-body: var(--font-size-32);
  --type-tile-label: var(--font-size-36);
  --type-choice: var(--font-size-38);
  --type-clock: var(--font-size-48);
  --type-heading: var(--font-size-56);
  --type-message: var(--font-size-72);
  --type-home-list: var(--font-size-88);
  --space-inline: var(--space-12);
  --space-inset: var(--space-24);
  --space-section: var(--space-32);
  --motion-feedback: var(--duration-140);
  --motion-opacity: var(--duration-120);
  --motion-layout: var(--duration-180);
  --shape-control: var(--radius-32);
  --shape-choice: var(--radius-18);
  --shape-group: var(--radius-20);
  --shape-panel: var(--radius-24);
  --shape-dock: var(--radius-48);

  /* Component: current default dimensions; local variants can override. */
  --button-height: 64px;
  --button-radius: var(--shape-control);
  --button-font-size: var(--type-action);
  --choice-line-height: var(--line-height-choice);
  --button-gap: var(--space-inline);
  --choice-min-height: 78px;
  --choice-radius: var(--shape-choice);
  --choice-font-size: var(--type-choice);
  --choice-padding-y: var(--space-12);
  --choice-padding-x: var(--space-inset);
  --group-height: 96px;
  --group-radius: var(--shape-group);
  --library-tile-width: 320px;
  --library-tile-height: 216px;
  --library-tile-radius: var(--shape-control);
  --dock-radius: var(--shape-dock);
  --dialog-width: 1120px;
  --dialog-left: 400px;
  --dialog-top: 144px;
  --dialog-padding: var(--space-48);
  --dialog-radius: var(--shape-panel);
  --dialog-background: #17191d;
  --dialog-ink: #fff;
  --dialog-field-background: #292c33;
  --dialog-border: #777;
  --dialog-focus: #fff;
  --dialog-input-radius: var(--radius-12);
  --dialog-input-type: var(--type-action);
  --dialog-label-type: var(--type-label);
  --dialog-focus-width: 4px;
  --choice-indicator-width: 30px;
}