/* ============================================================
   むすひデマンド交通 デザイントークン
   - ライトを :root に完全定義。ダークは2重ガード
     (①prefers-color-scheme ②data-theme) で上書き
   - 色はむすひブランド（深緑 #1B4332 / 金 #C2A14D）系統
   ============================================================ */

:root {
  /* 色: 地と面 */
  --c-bg: #F4F6F2;
  --c-surface: #FFFFFF;
  --c-surface-2: #ECF1E9;
  --c-line: #D9E0D6;
  --c-line-strong: #AFBBAC;

  /* 色: 文字 */
  --c-text: #1D2A23;
  --c-text-sub: #54655B;
  --c-text-faint: #75847B;
  --c-text-on-primary: #FFFFFF;

  /* 色: ブランド */
  --c-primary: #1B4332;
  --c-primary-strong: #143528;
  --c-primary-soft: #E3EEE7;
  --c-accent: #C2A14D;
  --c-accent-ink: #77621F;

  /* 色: 意味色（本文に使える濃さ / 帯に使える淡さ） */
  --c-ok: #2E7D5B;      --c-ok-soft: #E2F1E9;
  --c-warn: #A85B12;    --c-warn-soft: #F7ECDD;
  --c-danger: #B3402F;  --c-danger-soft: #F8E7E3;
  --c-info: #1F4E79;    --c-info-soft: #E5EDF5;

  --c-focus: #2D6A4F;

  /* 字の大きさ（高齢の利用者を想定して大きめ） */
  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.90625rem;  /* 14.5px */
  --fs-md: 1rem;        /* 16px 基準 */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.3125rem;   /* 21px */
  --fs-2xl: 1.625rem;   /* 26px */
  --fs-3xl: 2rem;       /* 32px */

  /* 余白 4px 刻み */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* 角丸・影 */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px;
  --shadow-1: 0 1px 2px rgba(20, 40, 30, 0.06), 0 1px 6px rgba(20, 40, 30, 0.06);
  --shadow-2: 0 4px 16px rgba(20, 40, 30, 0.12);

  /* 操作 */
  --tap-min: 48px;        /* タップ領域の最小 */
  --dur: 0.15s;           /* 標準トランジション */
}

/* ダーク（OS設定・手動指定の両対応） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #101714;
    --c-surface: #18211C;
    --c-surface-2: #1F2B24;
    --c-line: #2A3830;
    --c-line-strong: #46584D;

    --c-text: #E7EEE8;
    --c-text-sub: #A7B5AB;
    --c-text-faint: #7C897F;
    --c-text-on-primary: #FFFFFF;

    --c-primary: #2E7D5B;
    --c-primary-strong: #3C9670;
    --c-primary-soft: #21332A;
    --c-accent: #D6B968;
    --c-accent-ink: #E3CC85;

    --c-ok: #63B893;      --c-ok-soft: #1E3229;
    --c-warn: #E0A159;    --c-warn-soft: #37281A;
    --c-danger: #E08373;  --c-danger-soft: #3A211D;
    --c-info: #7FAAD1;    --c-info-soft: #1D2B38;

    --c-focus: #63B893;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 6px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --c-bg: #101714;
  --c-surface: #18211C;
  --c-surface-2: #1F2B24;
  --c-line: #2A3830;
  --c-line-strong: #46584D;

  --c-text: #E7EEE8;
  --c-text-sub: #A7B5AB;
  --c-text-faint: #7C897F;
  --c-text-on-primary: #FFFFFF;

  --c-primary: #2E7D5B;
  --c-primary-strong: #3C9670;
  --c-primary-soft: #21332A;
  --c-accent: #D6B968;
  --c-accent-ink: #E3CC85;

  --c-ok: #63B893;      --c-ok-soft: #1E3229;
  --c-warn: #E0A159;    --c-warn-soft: #37281A;
  --c-danger: #E08373;  --c-danger-soft: #3A211D;
  --c-info: #7FAAD1;    --c-info-soft: #1D2B38;

  --c-focus: #63B893;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 6px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5);
}