/* ========================================
   tokens.css — デザイントークン定義
   松原メイフラワー病院
   全レイヤー（reset/typography/layout/components/gutenberg/pages）は
   このファイルの変数のみを参照し、値をハードコードしない。
   ======================================== */

:root {
  /* ===== --c-* カラー ===== */
  /* メインカラー：オレンジ系 */
  --c-primary: #EE8736;
  --c-primary-dark: #C66B23;
  --c-primary-light: #F5AB6E;
  --c-primary-pale: #F8FAFC;
  --c-primary-bg: #FFFFFF;
  --c-primary-tint: #FFF1E2;

  /* サブカラー：ブルー（医療・清潔感） */
  --c-accent-blue: #2E8FD6;
  --c-accent-blue-light: #E5F0FA;
  --c-accent-blue-dark: #1F75B5;

  /* サブカラー：グリーン（健康・リハビリ） */
  --c-accent-green: #80B560;
  --c-accent-green-light: #E8F5E1;
  --c-accent-green-dark: #5F9544;

  /* アクセント：レッド（緊急・注意） */
  --c-accent-red: #D14444;
  --c-accent-red-light: #FFF0F0;
  --c-accent-red-dark: #B83030;

  /* テキスト */
  --c-text-main: #1A1A1A;
  --c-text-sub: #4A4A4A;
  --c-text-light: #8A8F95;
  --c-text-white: #FFFFFF;

  /* 背景 */
  --c-bg-white: #FFFFFF;
  --c-bg-warm: #FFFFFF;
  --c-bg-section: #F8FAFC;
  --c-bg-footer: #F4F7FA;
  --c-bg-beige: #F0EBE3;
  --c-bg-peach: #FDF6EC;
  --c-bg-peach-2: #FFF8EF;

  /* ボーダー */
  --c-border: #E2E6EB;
  --c-border-light: #EEF1F4;
  --c-border-gray: #BBBBBB;

  /* プレースホルダー */
  --c-placeholder: #E5E7EB;

  /* 汎用の黒/白（オーバーレイ・シャドウのベース） */
  --c-black: #000000;
  --c-white: #FFFFFF;

  /* ===== --ff-* フォントファミリー ===== */
  --ff-main: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --ff-accent: "Zen Maru Gothic", "Noto Sans JP", sans-serif;

  /* ===== --fs-* フォントサイズ =====
     本文は17pxを基準（旧18pxから変更）。他は既存サイトの実測値を
     使用頻度順に命名し、意味のある名前の変数として再利用可能にする。 */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-sm2: 14px;
  --fs-base-sm: 15px;
  --fs-base-md: 16px;
  --fs-base: 17px;  /* 本文基準サイズ */
  --fs-md: 18px;
  --fs-md2: 19px;
  --fs-lg: 20px;
  --fs-xl: 22px;
  --fs-xl2: 24px;
  --fs-2xl: 26px;
  --fs-2xl2: 28px;
  --fs-3xl: 30px;
  --fs-3xl2: 32px;
  --fs-4xl: 34px;

  /* ===== --sp-* スペーシング（padding/margin/gap共通） ===== */
  --sp-2xs: 2px;
  --sp-xs: 4px;
  --sp-xs2: 6px;
  --sp-sm: 8px;
  --sp-sm2: 10px;
  --sp-md: 12px;
  --sp-md2: 14px;
  --sp-lg: 16px;
  --sp-lg2: 18px;
  --sp-xl: 20px;
  --sp-xl2: 22px;
  --sp-2xl: 24px;
  --sp-2xl2: 28px;
  --sp-3xl: 32px;
  --sp-3xl2: 34px;
  --sp-4xl: 36px;
  --sp-5xl: 40px;
  --sp-6xl: 48px;
  --sp-7xl: 56px;
  --sp-8xl: 64px;
  --sp-9xl: 80px;
  --sp-10xl: 96px;
  --sp-header: 132px; /* 固定ヘッダー分のオフセット */

  /* ===== --container-* コンテナ幅（theme.json settings.layout用） ===== */
  --container-max: 1200px;  /* .l-container の実測値と一致（標準セクション幅） */
  --container-read: 720px;  /* 記事ページ本文等、長文の読みやすい幅 */

  /* ===== --r-* 角丸 ===== */
  --r-2xs: 2px;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 14px;
  --r-3xl: 16px;
  --r-4xl: 20px;
  --r-5xl: 24px;
  --r-full: 999px;

  /* ===== --sh-* 影 ===== */
  --sh-xs: 0 1px 4px rgba(0, 0, 0, 0.2);
  --sh-sm: 0 1px 8px rgba(0, 0, 0, 0.04);
  --sh-sm2: 0 1px 8px rgba(0, 0, 0, 0.05);
  --sh-md: 0 2px 12px rgba(0, 0, 0, 0.06);
  --sh-md2: 0 2px 16px rgba(0, 0, 0, 0.08);
  --sh-lg: 0 4px 20px rgba(0, 0, 0, 0.06);
  --sh-xl: 0 8px 28px rgba(0, 0, 0, 0.08);
  --sh-2xl: 0 8px 32px rgba(0, 0, 0, 0.10);
  --sh-header: 0 1px 0 var(--c-border-light);
  /* コンセプトカラー（オレンジ）のアクセントシャドウ */
  --sh-accent-sm: 0 2px 16px rgba(238, 135, 54, 0.10);
  --sh-accent-md: 0 2px 8px rgba(238, 135, 54, 0.30);
  --sh-accent-lg: 0 6px 16px rgba(238, 135, 54, 0.40);
  --sh-accent-xl: 0 6px 20px rgba(238, 135, 54, 0.35);
  --sh-accent-focus: 0 0 0 3px rgba(238, 135, 54, 0.15);
  --sh-accent-2xl: 0 12px 32px rgba(238, 135, 54, 0.12);
  --sh-accent-lg2: 0 8px 24px rgba(238, 135, 54, 0.10);
}