/*
 * Cross Medicine tokens v0.1.0
 * Screen colors, typography, spacing, actions, radii, and shadows are provisional.
 * See tokens.json for source and status metadata before treating a value as final.
 */
:root {
  color-scheme: light;

  --cm-brand-cyan: #00a1e9;
  --cm-brand-yellow: #fabf00;
  --cm-brand-ink: #231914;

  --cm-color-primary-50: #eaf8fe;
  --cm-color-primary-100: #d6f0fd;
  --cm-color-primary-200: #a9e2fa;
  --cm-color-primary-300: #73cef5;
  --cm-color-primary-400: #38b7ef;
  --cm-color-primary-500: #00a1e9;
  --cm-color-primary-600: #0086c5;
  --cm-color-primary-700: #006a9c;
  --cm-color-primary-800: #00506f;
  --cm-color-primary-900: #00374d;

  --cm-color-neutral-0: #ffffff;
  --cm-color-neutral-50: #f8fafb;
  --cm-color-neutral-100: #eef3f6;
  --cm-color-neutral-200: #dde6eb;
  --cm-color-neutral-300: #c6d2da;
  --cm-color-neutral-400: #96a7b2;
  --cm-color-neutral-500: #6f828e;
  --cm-color-neutral-600: #536670;
  --cm-color-neutral-700: #3d4c54;
  --cm-color-neutral-800: #2a353b;
  --cm-color-neutral-900: #172126;
  --cm-color-neutral-950: #0e1518;

  --cm-color-success-surface: #eaf8fe;
  --cm-color-success-border: #a9e2fa;
  --cm-color-success-text: #00506f;
  --cm-color-success-solid: #006a9c;
  --cm-color-warning-surface: #fff9e6;
  --cm-color-warning-border: #fabf00;
  --cm-color-warning-text: #231914;
  --cm-color-warning-solid: #fabf00;
  --cm-color-danger-surface: #ffffff;
  --cm-color-danger-border: #231914;
  --cm-color-danger-text: #231914;
  --cm-color-danger-solid: #231914;
  --cm-color-info-surface: #eaf8fe;
  --cm-color-info-border: #73cef5;
  --cm-color-info-text: #00506f;
  --cm-color-info-solid: #006a9c;

  --cm-surface-page: var(--cm-color-neutral-50);
  --cm-surface-panel: var(--cm-color-neutral-0);
  --cm-surface-subtle: var(--cm-color-neutral-100);
  --cm-border-default: var(--cm-color-neutral-200);
  --cm-border-strong: var(--cm-color-neutral-300);
  --cm-text-strong: var(--cm-brand-ink);
  --cm-text-default: var(--cm-color-neutral-900);
  --cm-text-muted: var(--cm-color-neutral-600);
  --cm-text-inverse: var(--cm-color-neutral-0);
  --cm-link-default: var(--cm-color-primary-700);
  --cm-link-hover: var(--cm-color-primary-800);
  --cm-focus-ring: 0 0 0 3px rgba(0, 161, 233, 0.28);

  --cm-action-primary: var(--cm-color-primary-700);
  --cm-action-primary-hover: var(--cm-color-primary-800);
  --cm-action-primary-active: var(--cm-color-primary-900);
  --cm-action-primary-text: var(--cm-color-neutral-0);
  --cm-action-secondary: var(--cm-color-neutral-0);
  --cm-action-secondary-hover: var(--cm-color-primary-50);
  --cm-action-secondary-text: var(--cm-color-primary-700);
  --cm-action-secondary-border: var(--cm-color-primary-300);
  --cm-action-danger: var(--cm-brand-ink);
  --cm-action-danger-hover: var(--cm-color-neutral-950);
  --cm-action-danger-text: var(--cm-color-neutral-0);

  --cm-font-brand: "NOU GB", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --cm-font-ui: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --cm-font-latin: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --cm-font-size-display: 40px;
  --cm-font-size-page-title: 32px;
  --cm-font-size-section-title: 24px;
  --cm-font-size-subsection: 20px;
  --cm-font-size-body: 16px;
  --cm-font-size-body-small: 14px;
  --cm-font-size-caption: 12px;

  --cm-line-height-display: 1.2;
  --cm-line-height-title: 1.25;
  --cm-line-height-heading: 1.35;
  --cm-line-height-body: 1.7;
  --cm-line-height-caption: 1.55;

  --cm-font-weight-regular: 400;
  --cm-font-weight-medium: 500;
  --cm-font-weight-bold: 700;

  --cm-space-0: 0;
  --cm-space-1: 4px;
  --cm-space-2: 8px;
  --cm-space-3: 12px;
  --cm-space-4: 16px;
  --cm-space-5: 20px;
  --cm-space-6: 24px;
  --cm-space-8: 32px;
  --cm-space-10: 40px;
  --cm-space-12: 48px;
  --cm-space-16: 64px;

  --cm-size-tap-target: 44px;
  --cm-size-content-readable: 760px;
  --cm-size-content-wide: 1200px;

  --cm-rule-title: 2px solid var(--cm-brand-cyan);
  --cm-rule-default: 1px solid var(--cm-color-neutral-200);
  --cm-rule-strong: 1px solid var(--cm-color-neutral-300);

  --cm-radius-none: 0;
  --cm-radius-sm: 4px;
  --cm-radius-md: 6px;
  --cm-radius-lg: 8px;
  --cm-radius-round: 999px;

  --cm-shadow-sm: 0 1px 2px rgba(14, 21, 24, 0.08);
  --cm-shadow-md: 0 8px 24px rgba(14, 21, 24, 0.10);
}