/*
  TSURI ONE デザイントークン

  サイト全体で使う値の定義 (色・書体・余白・罫線・影)。すべてのページで最初に読み込む (css.html の先頭)。
  値だけを持ち、セレクタは :root のみ。使い分けはスタイルガイド (/styleguide/) を参照。
*/

:root {
  /* --- ブランドカラー (Oceanic Harmony) ---
     ベースデザイン(案B改Ⅱ)のモックに合わせて再構成。明度順に 50→900。
     旧 style.css の .co0(#a7c6ed) / .co2(#74cef7) / .co3(#0180cc) は使用箇所が少ないため階調から外した */
  --th-brand-50: #eef3f9;    /* 表のゼブラ */
  --th-brand-100: #e9eef5;   /* ページ背景 (わずかに青みのあるグレー) */
  --th-brand-200: #cfd8e3;   /* 内部罫線 (1px) */
  --th-brand-300: #9be8f0;   /* = .co1。ネイビー帯の上のラベル・アイコン */
  --th-brand-400: #1c93e5;   /* ロゴの青。フォーカス・チェック */
  --th-brand-600: #0357af;   /* = .co4。リンク・サブラベル */
  --th-brand-800: #141a6b;   /* = .co5 / theme-color。帯・外枠・見出し・ボタン */
  --th-brand-900: #14213d;   /* 本文 */

  /* --- アクセント (セーフティオレンジ) ---
     主 CTA 専用。旧 .ca1-.ca3 (#f5b7b1 / #e4815a / #e74c3c) から置き換え */
  --th-accent-100: #ffe3d1;   /* 淡: ホバー背景・強調行 */
  --th-accent-500: #ff6a13;   /* 主 CTA */
  --th-accent-700: #d4520a;   /* CTA の hover / 押下 */

  /* --- 機能カラー (guide.css の識別色) ---
     ネイビー地でも白地でも区別がつく3色。オレンジは CTA 専用なので使わない */
  --th-feature-tackle: #1c93e5;     /* = --th-brand-400 (ロゴの青) */
  --th-feature-activity: #12a58f;   /* 海のティール */
  --th-feature-point: #f2a900;      /* 目印・ブイの黄 */

  /* --- カテゴリ色 (製品データのカテゴリ) ---
     ロッド / リール / ラインを色で見分けるための専用色。状態の意味色 (success / danger) と混同しないよう、緑・赤は使わない */
  --th-cat-rod: var(--th-brand-600);          /* ロッド: 濃い青 */
  --th-cat-rod-soft: #e3f1fc;
  --th-cat-reel: var(--th-feature-activity);  /* リール: ティール */
  --th-cat-reel-soft: #dff4f0;
  --th-cat-line: var(--th-feature-point);     /* ライン: 黄 */
  --th-cat-line-soft: #fff4d6;

  /* --- 潮の色 ---
     潮の種類 (大潮・中潮…) と月齢のバッジに使う。リンク青をそのまま使い、色数を増やさない。
     塗りは白文字 (7.0 で AA)、淡い地色のときは文字をこの色にする (地色の上で 7.4) */
  --th-tide: var(--th-brand-600);
  --th-tide-soft: #e3f1fc;

  /* --- セマンティック (案) ---
     Bootstrap 既定から、青みのパレットに馴染む値へ。alert / btn の再定義に使う */
  --th-success: #1a8f5a;
  --th-warning: #f2a900;
  --th-danger: #d32f2f;        /* フォームのエラーと同じ赤 */
  --th-info: #1c93e5;          /* = --th-brand-400 */
  --th-success-soft: #e3f4ea;  /* アラート背景 */
  --th-warning-soft: #fff4d6;
  --th-danger-soft: #fde7e7;
  --th-info-soft: #e3f1fc;

  /* --- ニュートラル (案) ---
     Bootstrap gray から、ベースデザインの青みのあるグレーへ。300 / 600 / 900 はブランド階調と共有 */
  --th-gray-50: #f5f7fa;
  --th-gray-100: #eef2f6;
  --th-gray-200: #dfe5ec;
  --th-gray-300: #cfd8e3;   /* = --th-brand-200 内部罫線 */
  --th-gray-400: #aab5c3;
  --th-gray-500: #8a93a0;   /* フォームの枠線 */
  --th-gray-600: #5b6b80;   /* 補足文 */
  --th-gray-700: #3d4a5c;   /* 一時的に前面に出るものの地 (Cookie 同意)。ネイビーの nav・フッタと見分けるための中間の濃さ */
  --th-gray-800: #23304a;
  --th-gray-900: #14213d;   /* = --th-brand-900 本文 */
  --th-white: #ffffff;

  /* --- 役割別エイリアス (案) --- */
  --th-color-primary: var(--th-brand-800);
  --th-color-primary-hover: var(--th-brand-600);
  --th-color-text: var(--th-brand-900);
  --th-color-heading: var(--th-brand-800);
  --th-color-text-muted: var(--th-gray-600);
  --th-color-link: var(--th-brand-600);
  --th-color-focus: var(--th-brand-400);
  --th-color-border: var(--th-brand-800);      /* 外枠 (2px) */
  --th-color-border-inner: var(--th-brand-200); /* 内部罫線 (1px) */
  --th-color-surface: var(--th-white);
  --th-color-background: var(--th-brand-100);

  /* --- グラデーション (.th-nav / .th-footer) ---
     ナビとフッターの色は現状維持の決定。ブランド階調の変更が波及しないようリテラルで固定する。変更しないこと */
  --th-gradient-nav: linear-gradient(180deg, #29dbd8, #141a6b);
  --th-gradient-footer: linear-gradient(180deg, #0357af, #111f2c);

  /* --- タイポグラフィ (採用: M PLUS 2 + BIZ UDPGothic + Exo 2 + BIZ UDGothic) ---
     base.css の body / 見出しがこの 2 つを使う。index.css の --font-heading: Open Sans(未ロード) は .idx-* の中だけに残っている */
  --th-font-body: "BIZ UDPGothic", "Hiragino Sans", "Meiryo", sans-serif;   /* 本文・表・フォーム・ボタン。UD 書体で小さな数値・カナの判別性を確保 */
  --th-font-heading: "M PLUS 2", "BIZ UDPGothic", sans-serif;                /* h1 / h2 / カードタイトルに限定。800 で使う。収録漢字 5,289 字 (Murecho は 2,337 字で汐・竿・磯・魚偏を欠くため不採用) */
  --th-font-label: "Exo 2", "BIZ UDPGothic", sans-serif;                     /* 英語ラベル・バッジ・統計の大きな数字。800 italic 大文字 */
  --th-font-num: "BIZ UDGothic", monospace;                                   /* 数値列。BIZ UDPGothic の半角等幅版 (全数字 0.5em)。本文と同デザインで桁が揃う */
  --th-font-logo: "Exo 2", sans-serif;   /* ロゴ・フッター (css.html で Google Fonts からロード済み) */
  --th-font-size-xs: 0.75rem;    /* 12px: パンくず */
  --th-font-size-sm: 0.875rem;   /* 14px: テーブル・補足 */
  --th-font-size-base: 1rem;     /* 16px */
  --th-font-size-lg: 1.25rem;
  --th-font-size-xl: 1.5rem;
  --th-font-size-2xl: 2rem;      /* 32px: ページ見出し (guide h1) */
  --th-line-height: 1.5;

  /* --- スペーシング (案: 4px ベース) --- */
  --th-space-1: 0.25rem;
  --th-space-2: 0.5rem;
  --th-space-3: 0.75rem;
  --th-space-4: 1rem;
  --th-space-6: 1.5rem;
  --th-space-8: 2rem;
  --th-space-12: 3rem;
  --th-space-16: 4rem;

  /* --- 形状 (ベースデザインのモックから確定) --- */
  /* 角丸: 直角が基本。sm / md は例外的に丸める要素 (トースト・ツールチップ・チップ等) のために定義しておく */
  --th-radius-none: 0;      /* 標準: カード・ボタン・入力欄・タグ */
  --th-radius-sm: 4px;      /* 小さな補助要素: ツールチップ・キーボードショートカット表示・コードの背景 */
  --th-radius-md: 8px;      /* 浮遊要素: トースト・ドロップダウン (直角の面から浮くものは少し丸めてよい) */
  --th-radius-pill: 9999px; /* チップ・トグル・ページネーションの現在位置など、丸で意味を持たせる場合 */
  --th-radius-round: 50%;   /* アバター・アイコン背景 */

  /* 罫線: 外枠 2px / 内部 1px の2段階。太い罫はセクション見出し下・カード・ボタンの外枠だけに使う */
  --th-border-width-outer: 2px;
  --th-border-width-inner: 1px;
  --th-border-outer: var(--th-border-width-outer) solid var(--th-color-border);        /* カード・ボタン・h2 の下線 */
  --th-border-inner: var(--th-border-width-inner) solid var(--th-color-border-inner);  /* 表の行・リスト・カードのフッター */
  --th-border-input: var(--th-border-width-inner) solid var(--th-gray-500);            /* フォームの枠線 */
  --th-border-accent: 3px solid var(--th-accent-500);                                  /* (案) 強調行・選択中タブの目印 */

  /* シャドウ: ぼかしのないハードシャドウ。ボタンと主要カードのみ。それ以外は影なし */
  --th-shadow-hard: 3px 3px 0 var(--th-brand-800);
  --th-shadow-hard-pressed: 1px 1px 0 var(--th-brand-800);   /* hover / 押下: 影を縮めて 2px 沈める (translate(2px, 2px) と併用) */
  --th-shadow-float: 0 8px 24px rgba(20, 26, 107, 0.18);     /* (案) モーダル・ドロップダウンなど浮遊要素だけに許可するぼかし影 */

  /* フォーカス: ロゴ青の 1px リングを内側に重ね、枠線と合わせて 2px 相当にする */
  --th-focus-ring: inset 0 0 0 1px var(--th-color-focus);

  /* パターン: 画像プレースホルダの滑り止め縞 (ネイビー 2 色) */
  --th-pattern-stripe: repeating-linear-gradient(135deg, var(--th-brand-800) 0 6px, #1f2a7a 6px 12px);

  /* --- レイアウト --- */
  --th-container-form: 700px;
  --th-container-narrow: 900px;    /* guide */
  --th-container-wide: 1100px;     /* index */
  --th-container-dashboard: 1200px;
  /* ブレークポイント: メディアクエリでは変数を使えないので値は直書きする。ここは覚書。
     sm = 480px 以下 (電話) / md = 768px 以下 (大きい電話・縦タブレット) / それ以上は PC。この 2 つ以外を増やさない */
  --th-bp-sm: 480px;
  --th-bp-md: 768px;
  --th-nav-height: 56px;           /* fixed-top の nav の高さ。sticky の基準 */
}