:root {
  color-scheme: light;
  /* Brand primitives: approved five-step palette plus an explicit Green 950 action foreground. */
  --red-100: #f7dee1;
  --red-300: #f7b5bd;
  --red-500: #f797a3;
  --red-600: #f37181;
  --red-800: #d44455;
  --orange-100: #f7e5c1;
  --orange-300: #f4cc7f;
  --orange-500: #ffab57;
  --orange-600: #ff9538;
  --orange-800: #b85e0f;
  --blue-100: #d1ebf5;
  --blue-300: #8acfea;
  --blue-500: #5bb4d7;
  --blue-600: #369ac1;
  --blue-800: #267594;
  --yellow-100: #fff4bd;
  --yellow-300: #ffe875;
  --yellow-500: #ffde38;
  --yellow-600: #ffc800;
  --yellow-800: #a88700;
  --green-100: #ecf7a1;
  --green-300: #d9eb60;
  --green-500: #bcd709;
  --green-600: #a2ba05;
  --green-800: #687734;
  --green-950: #414d12;
  --brown-100: #ebe1c7;
  --brown-300: #d9caa3;
  --brown-500: #c2b080;
  --brown-600: #b09c64;
  --brown-800: #513c05;

  /* 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: #ede8df;
  --surface-canvas: #faf7f2;
  --ink-50: #fafafa;
  --ink-100: #f4f4f5;
  --ink-200: #e4e4e7;
  --ink-300: #d4d4d8;
  --ink-400: #a1a1aa;
  --ink-500: #71717a;
  --ink-600: #52525b;
  --ink-700: #45454c;
  --ink-800: #38383e;
  --ink-900: #2e2e33;
  --ink-950: #242428;

  --page: var(--surface-50);
  --surface: var(--surface-0);
  --surface-subtle: var(--surface-100);
  --surface-strong: var(--ink-950);
  --surface-strong-pressed: var(--ink-800);
  --border: var(--surface-200);
  --border-strong: var(--surface-300);
  --text: var(--ink-950);
  --text-subtle: var(--ink-600);
  --text-muted: var(--ink-500);
  --card-description-color: var(--text-muted);
  --card-description-color-on-tinted: #65656a;
  --card-description-size: var(--text-sm);
  --chat-copy-size: var(--text-md);
  --text-on-strong: var(--surface-0);
  --icon-default: var(--ink-950);
  --primary: var(--green-500);
  --primary-pressed: color-mix(in srgb, var(--green-500) 88%, var(--ink-950));
  --primary-foreground: var(--green-950);
  --primary-soft: var(--green-100);
  --primary-soft-pressed: var(--green-300);
  --focus: var(--ink-950);
  --danger: var(--red-600);
  --danger-soft: var(--red-100);
  --app-canvas: var(--surface-canvas);
  --control-surface: var(--surface-control);
  --feature-ai: var(--green-600);
  --feature-ai-soft: var(--green-100);
  --feature-expert: var(--yellow-600);
  --feature-expert-soft: var(--yellow-100);
  --feature-support: var(--blue-600);
  --feature-support-soft: var(--blue-100);
  --chat-user-ai-surface: var(--green-300);
  --chat-user-expert-surface: var(--yellow-300);
  --chat-user-support-surface: var(--blue-300);
  --tool-card-surface: var(--surface);
  --tool-card-surface-pressed: var(--surface-subtle);
  --tool-card-ai-icon-surface: var(--green-300);
  --tool-card-expert-icon-surface: var(--yellow-300);
  --tool-card-support-icon-surface: var(--blue-300);
  --cat-avatar-primary-surface: var(--yellow-300);
  --cat-avatar-secondary-surface: var(--orange-300);
  --badge-featured: var(--orange-600);
  --badge-new: var(--green-600);
  --service-sitter: var(--red-600);
  --service-behavior: var(--orange-600);
  --service-grooming: var(--blue-600);
  --service-space: var(--green-600);
  --service-sitter-surface: var(--red-500);
  --service-sitter-surface-pressed: color-mix(in srgb, var(--red-500) 88%, var(--ink-950));
  --service-behavior-surface: var(--orange-500);
  --service-behavior-surface-pressed: color-mix(in srgb, var(--orange-500) 88%, var(--ink-950));
  --service-grooming-surface: var(--blue-500);
  --service-grooming-surface-pressed: color-mix(in srgb, var(--blue-500) 88%, var(--ink-950));
  --service-space-surface: var(--green-500);
  --service-space-surface-pressed: color-mix(in srgb, var(--green-500) 88%, var(--ink-950));
  --chat-accent: var(--feature-ai);
  --chat-accent-soft: var(--chat-user-ai-surface);
  --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);
  --overlay-scrim: color-mix(in srgb, var(--ink-950) 35%, 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;
  --section-gap: var(--space-8);
  --section-heading-content-gap: var(--space-3);
  --scroll-track-tail-space: var(--space-2);

  --media-ratio-article-cover: 16 / 10;
  --media-width-article-thumbnail: var(--space-20);
  --media-ratio-course-card: 16 / 9;
  --media-width-course-card: calc((100% - var(--space-3)) * 2 / 3);

  --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;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  --content-width: 76rem;
  --phone-width: 24.375rem;
  --phone-height: 52.75rem;
  --drawer-width: min(84%, 20.5rem);
  --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(--chat-user-expert-surface);
}

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