/* cloud-room デザイントークン
   出典: ChatGPT生成の画面7枚から抽出（全ファイルで完全一致を確認済み）
   このファイルが唯一の正本。各画面の <style> 内に再定義しないこと。 */

:root {
  --color-background: #F7F8F5;
  --color-surface: #FFFFFF;
  --color-text-primary: #243C3A;
  --color-text-secondary: #5A6B68;
  --color-border: #82938E;
  --color-primary: #17645A;
  --color-on-primary: #FFFFFF;
  --color-primary-pressed: #105449;
  --color-badge-insurance-bg: #E8F1EC;
  --color-badge-insurance-text: #24584E;
  --color-badge-self-pay-bg: #F5EEDF;
  --color-badge-self-pay-text: #695225;
  --color-error: #AF353B;
  --color-success: #276847;
  --font-family-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Meiryo", sans-serif;
  --font-family-heading: var(--font-family-body);
  --font-size-1: 0.875rem;
  --font-size-2: 1rem;
  --font-size-3: 1.125rem;
  --font-size-4: 1.25rem;
  --font-size-5: 1.5rem;
  --font-size-6: 1.75rem;
  --line-height-body: 1.75;
  --line-height-heading: 1.4;
  --line-height-label: 1.5;
  --font-weight-body: 400;
  --font-weight-label: 500;
  --font-weight-heading: 700;
  --letter-spacing: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  /* 画面の最大幅。
     ★ この1つだけは元の7枚から抽出した値ではない（2026-09-22 追加）。
     元は iPhone のモックだったため 390px 固定で、430px の端末では
     左右に 20px ずつ余白が出て継ぎ目が見えていた。
     フォーム1列として読みやすい上限として 480px にしている。
     これ以上広げると1行が長くなり、かえって読みにくくなる */
  --screen-max-width: 480px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --tap-target-min-width: 44px;
  --tap-target-min-height: 44px;
  --focus-outline: 2px solid var(--color-primary);
  --focus-outline-offset: 3px;
  --shadow: none;
  --background-image: none;
  --button-min-width: var(--tap-target-min-width);
  --button-min-height: 48px;
  --button-padding-block: var(--space-3);
  --button-padding-inline: var(--space-4);
  --button-gap: var(--space-2);
  --button-radius: var(--radius-md);
  --button-font-family: var(--font-family-body);
  --button-font-size: var(--font-size-2);
  --button-font-weight: 700;
  --button-line-height: var(--line-height-label);
  --button-primary-bg: var(--color-primary);
  --button-primary-text: var(--color-on-primary);
  --button-primary-border: 1px solid transparent;
  --button-primary-hover-bg: var(--color-primary-pressed);
  --button-primary-active-bg: var(--color-primary-pressed);
  --button-secondary-bg: var(--color-surface);
  --button-secondary-text: var(--color-primary);
  --button-secondary-border: 1px solid var(--color-primary);
  --button-secondary-hover-bg: var(--color-badge-insurance-bg);
  --button-secondary-active-bg: var(--color-badge-insurance-bg);
  --link-color: var(--color-primary);
  --link-hover-color: var(--color-primary-pressed);
  --link-active-color: var(--color-primary-pressed);
  --link-background: transparent;
  --link-border: none;
  --link-font-size: var(--font-size-2);
  --link-font-weight: 500;
  --link-line-height: var(--line-height-label);
  --link-decoration: underline;
  --link-underline-offset: 3px;
  --link-min-width: var(--tap-target-min-width);
  --link-min-height: var(--tap-target-min-height);
  --link-padding-block: var(--space-2);
}