/* ==========================================================================
   カルっとな！ デザインシステム — トークン層
   iOS / macOS アプリの表現（ティール系グラデーション、連続角丸、
   グループ化背景による階層表現）をWebへ移植した唯一の変数定義です。
   site.css はこのファイルの意味論トークンだけを参照します。
   ========================================================================== */

/* --- 1. プリミティブ（生の値。コンポーネントから直接使わない） ------------ */
:root {
  /* ティール: アプリのヒーローカード 0.05,0.34,0.42 → 0.06,0.58,0.55 に対応 */
  --hm-teal-950: #04252c;
  --hm-teal-900: #0a3541;
  --hm-teal-800: #075056;
  --hm-teal-700: #075f63;
  --hm-teal-600: #087f83;
  --hm-teal-500: #0f9a9c;
  --hm-teal-400: #23b3b0;
  --hm-teal-300: #62cdc5;
  --hm-teal-200: #a4e4db;
  --hm-teal-100: #d3f0ea;
  --hm-teal-050: #ecf7f4;

  /* インディゴ: アプリアイコン背景の右上と、患者側発話の識別色 */
  --hm-indigo-900: #101f43;
  --hm-indigo-700: #23306a;
  --hm-indigo-500: #5b5fc0;
  --hm-indigo-100: #e5e6f7;

  /* インク（無彩色に極わずかティールを含ませ、画面全体の色温度を揃える） */
  --hm-ink-950: #0c1a20;
  --hm-ink-900: #12242c;
  --hm-ink-800: #1d333c;
  --hm-ink-700: #2c444e;
  --hm-ink-600: #47606a;
  --hm-ink-500: #647a83;
  --hm-ink-400: #8ba0a7;
  --hm-ink-300: #b4c5c9;
  --hm-ink-200: #d5e0dd;
  --hm-ink-100: #e7eeeb;
  --hm-ink-050: #f2f6f4;

  /* サンド: アプリアイコンのアイボリー。注意喚起と余白の温度調整に使う */
  --hm-sand-500: #b8792b;
  --hm-sand-700: #7b4a16;
  --hm-sand-200: #f0e2cd;
  --hm-sand-100: #f7efe3;
  --hm-sand-050: #fbf6ee;

  /* ステータス */
  --hm-red-500: #d94a4f;
  --hm-amber-500: #d4831f;

  /* --- 2. タイポグラフィ ------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --font-numeric: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --text-2xs: 0.6875rem;
  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-md: 0.9375rem;
  --text-base: 1rem;
  --text-lg: clamp(1.03rem, 0.98rem + 0.25vw, 1.15rem);
  --text-xl: clamp(1.12rem, 1.04rem + 0.4vw, 1.3rem);
  --text-2xl: clamp(1.3rem, 1.16rem + 0.7vw, 1.7rem);
  --text-3xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.55rem);
  --text-4xl: clamp(2.15rem, 1.6rem + 2.6vw, 3.5rem);

  /* 和文は欧文より行間を広く、字間をわずかに詰める */
  --leading-tight: 1.34;
  --leading-snug: 1.55;
  --leading-body: 1.85;
  --leading-loose: 2;
  --tracking-tight: -0.015em;
  --tracking-normal: 0.005em;
  --tracking-wide: 0.14em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* --- 3. 余白（4ptグリッド） -------------------------------------------- */
  --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-section: clamp(4rem, 7vw, 6.5rem);
  --space-gutter: clamp(1rem, 4vw, 2rem);

  --measure-page: 1160px;
  --measure-text: 46rem;
  --measure-prose: 50rem;

  /* --- 4. 角丸（アプリの連続角丸 14/18/20/22/26pt に対応） ---------------- */
  --radius-xs: 0.5rem;
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.625rem;
  --radius-2xl: 2rem;
  --radius-pill: 999px;

  /* --- 5. モーション ------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* --- 6. 意味論トークン ------------------------------------------------------
   本サイトはライト配色のみで提供する。端末がダークモードでも配色は変えないため、
   `color-scheme: light` を宣言してフォームコントロール等もライトに固定する。 */
:root {
  color-scheme: light;

  --bg-canvas: #f4f7f5;
  --bg-canvas-glow-1: rgba(35, 179, 176, 0.16);
  --bg-canvas-glow-2: rgba(184, 121, 43, 0.07);
  --bg-surface: #ffffff;
  --bg-surface-muted: var(--hm-ink-050);
  --bg-surface-translucent: rgba(255, 255, 255, 0.76);
  --bg-header: rgba(244, 247, 245, 0.82);

  --border-hairline: rgba(18, 36, 44, 0.08);
  --border: var(--hm-ink-200);
  --border-strong: var(--hm-ink-300);

  --text-strong: var(--hm-ink-900);
  --text-body: var(--hm-ink-800);
  --text-muted: var(--hm-ink-600);
  --text-faint: var(--hm-ink-500);
  --text-on-dark: rgba(255, 255, 255, 0.72);
  --text-on-dark-strong: #ffffff;

  --accent: var(--hm-teal-600);
  --accent-text: var(--hm-teal-700);
  --accent-hover: var(--hm-teal-500);
  --accent-soft: var(--hm-teal-100);
  --accent-soft-border: rgba(8, 127, 131, 0.18);
  --accent-on-dark: var(--hm-teal-200);

  --caution-bg: var(--hm-sand-100);
  --caution-text: var(--hm-sand-700);
  --caution-border: rgba(123, 74, 22, 0.2);

  --speaker-doctor: var(--hm-teal-700);
  --speaker-patient: var(--hm-indigo-500);
  --recording: var(--hm-red-500);
  /* 記録中インジケータはティールのグラデーション上に置く前提の色 */
  --recording-on-gradient: #ff7a7f;

  --focus-ring: #b45c0d;

  /* 面のグラデーション（アプリのヒーローカードとアイコン背景に対応）。
     --gradient-accent は必ず白文字（--text-on-gradient）と組み合わせる */
  --gradient-accent: linear-gradient(135deg, var(--hm-teal-800), var(--hm-teal-500));
  --gradient-deep: linear-gradient(140deg, var(--hm-teal-950) 0%, var(--hm-teal-900) 45%, var(--hm-indigo-900) 100%);
  --gradient-calm: linear-gradient(140deg, var(--hm-teal-050), var(--hm-sand-050));
  --text-on-gradient: #ffffff;

  /* 主ボタンは背景と文字を独立トークンにし、コントラストを固定する */
  --button-primary-bg: var(--gradient-accent);
  --button-primary-text: #ffffff;
  --button-primary-shadow: 0 14px 30px -14px rgba(7, 95, 99, 0.45);
  --button-primary-shadow-hover: 0 20px 38px -16px rgba(7, 95, 99, 0.55);

  /* 影（アプリのカード浮きに合わせ、常に低コントラスト・広範囲） */
  --shadow-color: 18, 42, 50;
  --elev-1: 0 1px 2px rgba(var(--shadow-color), 0.04),
            0 10px 24px -16px rgba(var(--shadow-color), 0.24);
  --elev-2: 0 1px 3px rgba(var(--shadow-color), 0.05),
            0 20px 44px -24px rgba(var(--shadow-color), 0.3);
  --elev-3: 0 2px 6px rgba(var(--shadow-color), 0.06),
            0 44px 84px -40px rgba(var(--shadow-color), 0.38);
  --elev-accent: 0 14px 30px -14px rgba(7, 95, 99, 0.45);
}