:root {
  color-scheme: light;
  /* Brand primitives: 100 and 600 preserve the client-approved Figma colors. */
  --coral-100: #ffd0ce;
  --coral-600: #dc6266;
  --coral-950: #5d141b;
  --amber-100: #ffdab4;
  --amber-600: #e99b3a;
  --amber-950: #522600;
  --sky-100: #a3dfeb;
  --sky-600: #5dbdd3;
  --sky-950: #003b47;
  --yellow-100: #ffe044;
  --yellow-600: #ffbf00;
  --yellow-950: #4c2b00;
  --lime-100: #dff261;
  --lime-600: #b5d100;
  --lime-950: #2e3900;

  /* Quiet foundations shared by the product and its documentation site. */
  --surface-0: #ffffff;
  --surface-50: #fafafa;
  --surface-100: #f4f4f5;
  --surface-200: #e4e4e7;
  --surface-300: #d4d4d8;
  --surface-control: #eeeae7;
  --surface-canvas: #f6f3f1;
  --ink-500: #71717a;
  --ink-600: #52525b;
  --ink-950: #242428;

  --page: var(--surface-50);
  --surface: var(--surface-0);
  --surface-subtle: var(--surface-100);
  --surface-strong: var(--ink-950);
  --border: var(--surface-200);
  --border-strong: var(--surface-300);
  --text: var(--ink-950);
  --text-subtle: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-on-strong: var(--surface-0);
  --icon-default: var(--ink-950);
  --icon-navigation: var(--ink-500);
  --primary: var(--yellow-600);
  --primary-pressed: #e6a700;
  --primary-soft: var(--yellow-100);
  --primary-soft-pressed: #ffd939;
  --focus: var(--ink-950);
  --danger: var(--coral-950);
  --danger-soft: var(--coral-100);
  --app-canvas: var(--surface-canvas);
  --control-surface: var(--surface-control);
  --feature-ai: var(--yellow-600);
  --feature-ai-soft: var(--yellow-100);
  --feature-expert: var(--lime-600);
  --feature-expert-soft: var(--lime-100);
  --feature-support: var(--sky-600);
  --feature-support-soft: var(--sky-100);
  --badge-featured: var(--amber-600);
  --badge-new: var(--lime-600);
  --service-sitter: var(--coral-600);
  --service-behavior: var(--amber-600);
  --service-grooming: var(--sky-600);
  --service-space: var(--lime-600);
  --chat-accent: var(--feature-ai);
  --chat-accent-soft: var(--feature-ai-soft);
  --glass-surface: color-mix(in srgb, var(--surface-0) 58%, transparent);
  --glass-nav-surface: color-mix(in srgb, var(--surface-0) 20%, transparent);
  --glass-app-surface: color-mix(in srgb, var(--app-canvas) 35%, transparent);
  --glass-banner-surface: color-mix(in srgb, var(--app-canvas) 50%, transparent);
  --glass-selection: color-mix(in srgb, var(--surface-0) 94%, transparent);
  --glass-border: color-mix(in srgb, var(--surface-0) 72%, transparent);

  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-status: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-display: clamp(2.25rem, 5vw, 4.25rem);
  --leading-tight: 1.2;
  --leading-normal: 1.55;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

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

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-md: 0 12px 32px rgb(9 9 11 / 0.08);
  --shadow-glass: 0 4px 16px rgb(9 9 11 / 0.06), inset 0 1px 0 rgb(255 255 255 / 0.65);
  --shadow-device: 0 32px 80px rgb(9 9 11 / 0.16);

  --blur-glass: 1rem;
  --blur-glass-scrim: 0.25rem;
  --blur-banner-scrim: 0.5rem;

  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 360ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  --content-width: 76rem;
  --phone-width: 24.375rem;
  --phone-height: 52.75rem;
  --control-size-xs: 1.5rem;
  --control-size-sm: 2.25rem;
  --control-size-md: 2.5rem;
  --control-size-lg: 2.75rem;
}

.app[data-chat-mode="service"] {
  --chat-accent: var(--feature-expert);
  --chat-accent-soft: var(--feature-expert-soft);
}

.app[data-chat-mode="support"] {
  --chat-accent: var(--feature-support);
  --chat-accent-soft: var(--feature-support-soft);
}