/* =====================================================
   Felio Design System — Design Tokens v1.0
   フェリオ多摩川 デザイントークン
   使い分け:
     .felio-hp     … ホームページ（C 藍鼠）
     .felio-family … 家族向け記録閲覧画面（E 白練）
     .felio-app    … その他アプリ全般（B 九色の窓）
   ルート要素（html or body）にテーマクラスを1つ付与して使う。
   ===================================================== */

/* ---------- ブランド共通（9色グリッド + ロゴ灰） ---------- */
:root {
  --felio-sakura:  #CE97A0; /* 桜鼠   左上 */
  --felio-ama:     #B2A17E; /* 亜麻   中上 */
  --felio-matsuba: #5A7247; /* 松葉   右上 */
  --felio-ai:      #204A69; /* 藍     左中 */
  --felio-renga:   #B1552D; /* 煉瓦   中央 */
  --felio-sora:    #9DB4CC; /* 空     右中 */
  --felio-karashi: #C9A43F; /* 芥子   左下 */
  --felio-kamoba:  #40788A; /* 鴨羽   中下 */
  --felio-koke:    #8C9743; /* 苔     右下 */
  --felio-sumi:    #595A5C; /* ロゴ文字の灰 */

  /* 余白スケール（4pxベース） */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ブレイクポイント目安: 600 / 960 / 1280 */
}

/* ---------- C 藍鼠 — ホームページ ---------- */
.felio-hp {
  --bg:          #F7F5F0;  /* 象牙 */
  --surface:     #FFFFFF;
  --surface-alt: #EFEBE2;
  --ink:         #2E3A45;  /* 藍鼠 */
  --muted:       #67737D;
  --line:        #DFD9CE;
  --primary:     #1E3F5A;  /* 藍 */
  --primary-ink: #F7F5F0;
  --accent:      #C9A43F;  /* 金芥子（細線・CTA on navy） */
  --accent-ink:  #22303B;
  --accent-soft: #CE97A0;  /* 桜鼠（挿し色・多用禁止） */
  --inverse-bg:  #1E3F5A;  /* 濃色セクション */
  --inverse-ink: #F7F5F0;
  --inverse-muted: #B9C4CC;

  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --font-latin:   "Marcellus", Georgia, serif;
  --font-body:    "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;

  --fs-display: 40px; --fs-h2: 28px; --fs-h3: 21px;
  --fs-lead: 16px;    --fs-body: 15px; --fs-small: 13px; --fs-cap: 11.5px;
  --lh-heading: 1.6;  --lh-body: 1.9;

  --radius: 2px;
  --shadow: 0 1px 4px rgba(30, 63, 90, .08);
}

/* ---------- E 白練 — 家族向け記録閲覧画面 ---------- */
.felio-family {
  --bg:          #FAFAF8;  /* 白練 */
  --surface:     #FFFFFF;
  --surface-alt: #F1F1EE;
  --ink:         #3F4144;
  --muted:       #6E7174;
  --line:        #E5E5E1;
  --primary:     #3E7787;  /* 鴨羽（唯一の彩色） */
  --primary-ink: #FFFFFF;
  --primary-soft:#E2EDF0;
  --primary-deep:#2E5A66;

  /* 記録用の状態色（芥子・煉瓦を暗くして文字コントラスト確保） */
  --status-ok:      #3E7787;
  --status-caution: #8A6414;  /* 注意（例: 微熱・食事量低下） */
  --status-alert:   #A6453A;  /* 要確認（例: 発熱・転倒） */
  --status-caution-bg: #F6EEDA;
  --status-alert-bg:   #F7E6E3;

  --font-body: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", sans-serif;

  /* 文字は全体に大きめ（閲覧者=ご家族、幅広い年齢層） */
  --fs-h1: 24px; --fs-h2: 20px; --fs-body: 16px;
  --fs-label: 14px; --fs-small: 13.5px;
  --fs-num: 28px;   /* バイタル数値 */
  --lh-body: 2.0;

  --radius: 8px;
  --touch-min: 48px; /* タップ領域の最小値 */
  --shadow: 0 1px 3px rgba(63, 65, 68, .07);
}

/* ---------- B 九色の窓 — その他アプリ全般 ---------- */
.felio-app {
  --bg:          #FFFFFF;
  --surface:     #FFFFFF;
  --surface-alt: #F6F5F2;
  --ink:         #33383C;
  --muted:       #6B7075;
  --line:        #E3E1DC;
  --primary:     #204A69;  /* 藍 */
  --primary-ink: #FFFFFF;
  --primary-soft:#E4EBF1;

  /* 状態色（9色から導出・文字用に暗色化） */
  --success:     #4C6B3C;  /* 松葉系 */
  --success-bg:  #EAEFE4;
  --warning:     #8A6414;  /* 芥子系 */
  --warning-bg:  #F6EEDA;
  --danger:      #A0492A;  /* 煉瓦系 */
  --danger-bg:   #F7E8E1;
  --info:        #33627E;  /* 空・藍系 */
  --info-bg:     #E8EFF5;

  /* カテゴリ色（モジュール識別・帯/アイコンに使用） */
  --cat-room:    #CE97A0;  /* 住まい・居室 */
  --cat-dining:  #B1552D;  /* 食事 */
  --cat-care:    #204A69;  /* ケア・看護 */
  --cat-garden:  #8C9743;  /* 中庭・環境 */
  --cat-event:   #C9A43F;  /* イベント・レク */
  --cat-access:  #40788A;  /* アクセス・窓口 */
  --cat-staff:   #5A7247;  /* スタッフ・採用 */
  --cat-company: #B2A17E;  /* 会社・運営 */
  --cat-blog:    #9DB4CC;  /* ブログ・発信 */

  --font-body:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-latin: "Manrope", "Helvetica Neue", sans-serif; /* 欧文・数字 */

  --fs-h1: 22px; --fs-h2: 18px; --fs-body: 14.5px;
  --fs-small: 12.5px; --fs-cap: 11px;
  --lh-body: 1.75;

  --radius: 0px;   /* 角丸なし＝窓格子 */
  --shadow: none;  /* 影ではなく1pxの線で区切る */
}

/* ---------- 共通ユーティリティ ---------- */
.felio-hp, .felio-family, .felio-app {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}
.felio-hp :focus-visible,
.felio-family :focus-visible,
.felio-app :focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .felio-hp *, .felio-family *, .felio-app * {
    animation: none !important;
    transition: none !important;
  }
}