/* Generated from design.md by npm run build:design. */
:root {
  color-scheme: light;

  --primitive-purple-50: #f8f4fa;
  --primitive-purple-100: #efe5f3;
  --primitive-purple-200: #dfcbe7;
  --primitive-purple-300: #c9a8d6;
  --primitive-purple-400: #a978bc;
  --primitive-purple-500: #8d50a5;
  --primitive-purple-600: #793e94;
  --primitive-purple-700: #633178;
  --primitive-purple-800: #4c275c;
  --primitive-purple-900: #371c43;

  --primitive-teal-50: #effbf8;
  --primitive-teal-100: #d4f4ee;
  --primitive-teal-200: #a9e8dd;
  --primitive-teal-300: #71d5c6;
  --primitive-teal-400: #3fc1af;
  --primitive-teal-500: #1eb3a0;
  --primitive-teal-600: #128b7c;
  --primitive-teal-700: #0f6e63;
  --primitive-teal-800: #10584f;
  --primitive-teal-900: #0d4841;

  --primitive-neutral-0: #ffffff;
  --primitive-neutral-50: #f8f9f8;
  --primitive-neutral-100: #f1f3f1;
  --primitive-neutral-200: #e2e6e2;
  --primitive-neutral-300: #ccd2cc;
  --primitive-neutral-400: #899189;
  --primitive-neutral-500: #6e766e;
  --primitive-neutral-600: #545b54;
  --primitive-neutral-700: #3d433d;
  --primitive-neutral-800: #292e29;
  --primitive-neutral-900: #1d211d;
  --primitive-neutral-950: #111411;

  --color-brand-primary: var(--primitive-purple-600);
  --color-brand-accent: var(--primitive-teal-500);

  --color-bg-canvas: var(--primitive-neutral-50);
  --color-bg-surface: var(--primitive-neutral-0);
  --color-bg-subtle: var(--primitive-neutral-100);
  --color-bg-brand-subtle: var(--primitive-purple-50);
  --color-bg-accent-subtle: var(--primitive-teal-50);
  --color-bg-inverse: var(--primitive-neutral-900);

  --color-text-primary: var(--primitive-neutral-900);
  --color-text-secondary: var(--primitive-neutral-600);
  --color-text-tertiary: var(--primitive-neutral-500);
  --color-text-disabled: var(--primitive-neutral-400);
  --color-text-inverse: var(--primitive-neutral-0);
  --color-text-brand: var(--primitive-purple-700);
  --color-text-link: var(--primitive-purple-700);
  --color-text-link-hover: var(--primitive-purple-800);

  --color-border-muted: var(--primitive-neutral-200);
  --color-border-default: var(--primitive-neutral-400);
  --color-border-strong: var(--primitive-neutral-500);
  --color-border-selected: var(--primitive-purple-600);
  --color-border-focus: var(--primitive-purple-600);

  --color-action-primary-bg-default: var(--primitive-purple-600);
  --color-action-primary-bg-hover: var(--primitive-purple-700);
  --color-action-primary-bg-active: var(--primitive-purple-800);
  --color-action-primary-content: var(--primitive-neutral-0);

  --color-action-secondary-bg-default: var(--primitive-neutral-0);
  --color-action-secondary-bg-hover: var(--primitive-purple-50);
  --color-action-secondary-bg-active: var(--primitive-purple-100);
  --color-action-secondary-content: var(--primitive-purple-700);

  --color-action-ghost-bg-default: transparent;
  --color-action-ghost-bg-hover: var(--primitive-neutral-100);
  --color-action-ghost-bg-active: var(--primitive-neutral-200);
  --color-action-ghost-content: var(--primitive-neutral-700);

  --color-action-danger-bg-default: #b42318;
  --color-action-danger-bg-hover: #912018;
  --color-action-danger-bg-active: #7a271a;
  --color-action-danger-content: #ffffff;

  --color-control-disabled-bg: var(--primitive-neutral-200);
  --color-control-disabled-content: var(--primitive-neutral-400);
  --color-control-disabled-border: var(--primitive-neutral-300);

  --color-feedback-success-bg: #ecfdf3;
  --color-feedback-success-content: #177a50;
  --color-feedback-success-border: #a6f4c5;
  --color-feedback-warning-bg: #fffaeb;
  --color-feedback-warning-content: #8a4b08;
  --color-feedback-warning-border: #fedf89;
  --color-feedback-danger-bg: #fef3f2;
  --color-feedback-danger-content: #b42318;
  --color-feedback-danger-border: #fecdca;
  --color-feedback-info-bg: #eff8ff;
  --color-feedback-info-content: #175cd3;
  --color-feedback-info-border: #b2ddff;

  --color-data-1: var(--primitive-purple-600);
  --color-data-2: var(--primitive-teal-700);
  --color-data-3: #175cd3;
  --color-data-4: #b54708;
  --color-data-5: #b42318;
  --color-data-6: var(--primitive-neutral-500);

  --font-family-sans: Inter, "Noto Sans TC", "Noto Sans JP", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --font-size-caption: 0.75rem;
  --font-size-label: 0.8125rem;
  --font-size-body-sm: 0.875rem;
  --font-size-body: 1rem;
  --font-size-heading-sm: 1.125rem;
  --font-size-heading-md: 1.375rem;
  --font-size-heading-lg: 1.75rem;
  --font-size-display: 2.25rem;

  --line-height-caption: 1.125rem;
  --line-height-label: 1.25rem;
  --line-height-body-sm: 1.375rem;
  --line-height-body: 1.5625rem;
  --line-height-heading-sm: 1.625rem;
  --line-height-heading-md: 1.875rem;
  --line-height-heading-lg: 2.25rem;
  --line-height-display: 2.75rem;

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

  --radius-none: 0;
  --radius-small: 0.25rem;
  --radius-control: 0.375rem;
  --radius-container: 0.5rem;
  --radius-full: 999px;

  --border-width-default: 1px;
  --border-width-focus: 2px;

  --size-control-compact: 2rem;
  --size-control-default: 2.5rem;
  --size-control-touch: 2.75rem;
  --size-icon-small: 1rem;
  --size-icon-default: 1.25rem;
  --size-icon-large: 1.5rem;

  --shadow-raised: 0 1px 2px rgb(17 20 17 / 0.06);
  --shadow-dialog: 0 16px 40px rgb(17 20 17 / 0.18);
  --focus-ring: 0 0 0 3px rgb(121 62 148 / 0.2);

  --motion-duration-fast: 120ms;
  --motion-duration-normal: 180ms;
  --motion-duration-slow: 240ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  --layout-nav-width: 16rem;
  --layout-content-max: 70rem;
  --layout-reading-max: 75ch;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 1ms;
    --motion-duration-normal: 1ms;
    --motion-duration-slow: 1ms;
  }
}