/* ==========================================================================
   B-tria Spica — デザイントークン
   公式ブランドカラー（#FFFFFF / #00C2CB / #595959、ロゴと共通）を基準に、
   UIに必要な分だけ濃淡・淡色を派生させている。
   ========================================================================== */

:root {
  /* --- Color: base（公式ブランドカラー） --- */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f4fbfb;   /* teal淡色（区切りセクション用の派生色） */
  --color-ink: #595959;           /* 公式ブランドカラー（本文・基本のインク色） */
  --color-ink-strong: #2e2e2e;    /* 見出し等、より強い視認性が必要な箇所の派生色 */
  --color-ink-muted: #8a8a8a;     /* 補足テキスト用の派生色（#595959より薄い） */
  --color-border: #e2e2e2;        /* #595959系の淡色派生 */

  /* --- Color: accent（公式ブランドカラー #00C2CB） ---
     #00C2CBそのものは白背景に対してWCAG AAの文字コントラスト（4.5:1）を
     満たさないため、文字・アイコン・ボタン塗りなど「読む／識別する」用途には
     派生の濃色（--color-accent-dark）を使う。#00C2CB自体はロゴ・大きめの
     装飾フィル・淡色バッジの背景など、文字を直接載せない箇所で使用する。 */
  --color-accent: #00c2cb;        /* 公式ブランドカラー。文字を乗せない大きめの装飾フィル等 */
  --color-accent-mid: #009199;    /* 白アイコンを乗せるバッジ背景用（白との対比3.8:1、非text基準クリア） */
  --color-accent-dark: #00767c;   /* 文字・ボタン塗り・リンク等、読む用途はこちら（AA準拠 5.4:1） */
  --color-accent-soft: #e3f9fa;   /* バッジ等の背景に使う派生淡色 */
  --color-accent-ink: #ffffff;

  /* --- Color: semantic status（体験教室の空席状況等。ブランドカラーとは別に
     状態を判別できる必要があるための機能色） --- */
  --status-open: #2f7d4f;
  --status-open-soft: #e2f2e7;
  --status-few: #b4791f;
  --status-few-soft: #f8ecd7;
  --status-full: #b23b34;
  --status-full-soft: #f7e0dd;
  --status-closed: #8a8a8a;
  --status-closed-soft: #ededed;

  --shadow-sm: 0 1px 2px rgba(46, 46, 46, 0.06), 0 4px 12px rgba(46, 46, 46, 0.05);
  --shadow-md: 0 2px 4px rgba(46, 46, 46, 0.08), 0 12px 28px rgba(46, 46, 46, 0.09);

  /* --- Typography ---
     本文：Noto Sans JP 400/500
     日本語見出し：Noto Sans JP 600/700
     英字の大見出し・ラベル・数字：Manrope（CJKを含まないため、
     和文が混在すると自動でNoto Sans JPにフォールバックする） */
  --font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-heading: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-display: "Manrope", "Noto Sans JP", "Hiragino Sans", sans-serif;

  --fs-body: 1rem;          /* 16px 基準。本文はこれ未満にしない */
  --fs-small: 0.875rem;     /* 14px。注記等の最小サイズ */
  --fs-lead: 1.125rem;      /* 18px */
  --fs-h3: 1.375rem;        /* 22px */
  --fs-h2: 1.75rem;         /* 28px */
  --fs-h1: 2.25rem;         /* 36px */
  --fs-hero: 2.5rem;        /* 40px（スマホ）。PCではlayout.css内で拡大 */

  --lh-body: 1.85;
  --lh-heading: 1.4;

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* --- Layout --- */
  --container-max: 1120px;
  --container-narrow: 760px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;

  /* --- Touch target（押しやすさ確保） --- */
  --tap-min: 44px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1c1c1c;
    --color-surface: #262626;
    --color-surface-alt: #202b2b;
    --color-ink: #d9d9d9;
    --color-ink-strong: #f2f2f2;
    --color-ink-muted: #a3a3a3;
    --color-border: #3d3d3d;

    --color-accent: #2fd6de;
    --color-accent-mid: #0f8189;
    --color-accent-dark: #6ce4ea;
    --color-accent-soft: #123639;
    --color-accent-ink: #0d2223;

    --status-open: #6fbf8c;
    --status-open-soft: #1c3327;
    --status-few: #dba956;
    --status-few-soft: #3a2c14;
    --status-full: #e08a83;
    --status-full-soft: #3a1d1a;
    --status-closed: #a3a3a3;
    --status-closed-soft: #303030;

    color-scheme: dark;
  }
}