/**
 * vars.css — Agriviz CSS変数定義
 * すべてのダークテーマページで使用する CSS カスタムプロパティ
 */
:root {
  /* ── グリーンパレット ── */
  --green-dark:  #0d3b1e;
  --green-mid:   #1a5c2a;
  --green-main:  #2d8a45;
  --green-light: #4caf50;
  --green-pale:  #a8d5a2;

  /* ── アクセント（テーマで切り替え） ── */
  --accent:       #4caf50;
  --accent-hover: #3d9658;
  --accent-pale:  #a8d5a2;

  /* ── アクセントカラー ── */
  --teal:   #26a69a;
  --amber:  #ff9800;
  --orange: #e8792a;
  --yellow: #f5c842;
  --blue:   #2196f3;
  --purple: #9c27b0;
  --red:    #f44336;
  --danger: #ef5350;
  --link:   #64b5f6;

  /* ── ダークテーマトークン ── */
  --bg-grad: linear-gradient(145deg, #0a2e14 0%, #1a5c2a 45%, #2a6e38 75%, #0f3318 100%);
  --card-bg:     rgba(255,255,255,0.08);
  --card-border: rgba(255,255,255,0.15);
  --shadow:      0 8px 32px rgba(0,0,0,0.35);
  --shadow-sm:   0 4px 16px rgba(0,0,0,0.25);

  /* ── テキスト ── */
  --text-main:  #fff;
  --text-sub:   rgba(255,255,255,0.70);
  --text-muted: rgba(255,255,255,0.50);

  /* ── インプット ── */
  --input-bg:     rgba(255,255,255,0.10);
  --input-border: rgba(255,255,255,0.22);
  --select-opt-bg: #1a3a1a;

  /* ── ヘッダー・ナビ ── */
  --header-bg:  rgba(10,46,20,0.90);
  --nav-bg:     linear-gradient(160deg, #0a2e14 0%, #1a5c2a 60%, #0f3318 100%);
  --modal-bg:   #1a2e1a;

  /* ── ボーダー半径 ── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius:    16px;
  --radius-md: 18px;
  --radius-lg: 20px;

  /* ── フォーム入力幅 ── */
  --w-pin:    80px;   /* PIN・4桁固定 */
  --w-num-s:  100px;  /* 面積・株数・枚数・小数値など4〜5桁 */
  --w-num-m:  140px;  /* 金額・単価・使用量など7桁以内 */
  --w-time:   130px;  /* time型・休憩分・月選択 */
  --w-date:   160px;  /* date型 */
  --w-text-s: 160px;  /* コード・型番・単位・電話番号など */
  --w-text-m: 240px;  /* 氏名・品種名・機械名・担当者など */
  --w-text-l: 360px;  /* 住所・説明・備考(1行)など */
  --w-url:    480px;  /* URLフィールド */

  /* ════════════════════════════════════════════════════
     【v8.7+】セマンティックデザイントークン
     既存変数のエイリアス。マルチテーマ ([data-theme="..."]) 対応のため、
     直接の固定色ではなく既存テーマ変数 (--accent / --green-* / --danger 等) を
     参照する形で定義する。新規コンポーネントは原則これらを使うこと。
     既存変数は互換のためそのまま残す。
  ════════════════════════════════════════════════════ */

  /* ── Primary：主要アクション（送信・保存・ログイン・承認） ── */
  --color-primary:        var(--accent);            /* 4caf50 / theme-aware */
  --color-primary-hover:  var(--accent-hover);
  --color-primary-active: var(--green-mid);
  --color-primary-text:   #ffffff;

  /* ── Secondary：補助アクション（戻る・編集・詳細） ── */
  --color-secondary:        transparent;
  --color-secondary-border: var(--accent);
  --color-secondary-text:   var(--accent);
  --color-secondary-hover:  rgba(76, 175, 80, 0.15);

  /* ── Danger：破壊的アクション（削除・取消・差戻し） ── */
  --color-danger:        var(--danger);             /* ef5350 */
  --color-danger-hover:  #c9302c;
  --color-danger-light:  rgba(239, 83, 80, 0.15);
  --color-danger-text:   #ffffff;

  /* ── Warning：注意・催促 ── */
  --color-warning:        var(--orange);            /* e8792a */
  --color-warning-hover:  #cc7a00;
  --color-warning-light:  rgba(232, 121, 42, 0.15);
  --color-warning-text:   #ffffff;

  /* ── Info：情報・参照系（詳細・CSV・印刷） ── */
  --color-info:        var(--blue);                 /* 2196f3 */
  --color-info-hover:  #1976d2;
  --color-info-light:  rgba(33, 150, 243, 0.15);
  --color-info-text:   #ffffff;

  /* ── Neutral：軽微（閉じる・スキップ） ── */
  --color-neutral:        rgba(255, 255, 255, 0.12);
  --color-neutral-border: rgba(255, 255, 255, 0.25);
  --color-neutral-hover:  rgba(255, 255, 255, 0.2);
  --color-neutral-text:   var(--text-main);

  /* ── Success：成功・完了ステータス ── */
  --color-success:       #28a745;
  --color-success-light: rgba(40, 167, 69, 0.18);
  --color-success-text:  #ffffff;

  /* ── テキスト（既存と並行）── */
  --text-primary:   var(--text-main);
  --text-secondary: var(--text-sub);
  --text-disabled:  rgba(255, 255, 255, 0.30);
  --text-on-light:  #1a3d2b;

  /* ── ボーダー（セマンティック）── */
  --border-subtle:  rgba(255, 255, 255, 0.10);
  --border-default: var(--card-border);
  --border-focus:   var(--accent);
  --border-error:   var(--danger);

  /* ── 半径エイリアス ── */
  --border-radius-sm:   var(--radius-sm);          /*  8px */
  --border-radius-md:   var(--radius-xs);          /*  6px ※プロジェクト既存 */
  --border-radius-lg:   var(--radius);             /* 16px */
  --border-radius-pill: 999px;

  /* ── スペーシング（命名: 用途ベース） ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ── スペーシング（命名: 8px ベース数値）8px が --space-2 になる ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── 用途別エイリアス ── */
  --gap-xs:   var(--space-1);    /*  4px：アイコンとテキスト間 */
  --gap-sm:   var(--space-2);    /*  8px：タグ・バッジ間 */
  --gap-md:   var(--space-3);    /* 12px：ボタン間・フォームアイテム間 */
  --gap-lg:   var(--space-4);    /* 16px：フォームフィールド間 */
  --gap-xl:   var(--space-6);    /* 24px：セクション間 */

  /* ── パディング（用途別） ── */
  --padding-btn-y:      8px;
  --padding-btn-x:     16px;
  --padding-input-y:    9px;
  --padding-input-x:   12px;
  --padding-card:      var(--space-5);   /* 20px */
  --padding-page-x:    var(--space-6);   /* 24px */
  --padding-page-y:    var(--space-6);   /* 24px */
  --padding-page-x-sm: var(--space-4);   /* 16px（モバイル） */
  --padding-page-y-sm: var(--space-4);   /* 16px（モバイル） */

  --header-height: 56px;

  /* ── フォントサイズ ── */
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-md:   15px;
  --font-size-lg:   17px;
  --font-size-xl:   20px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;

  /* ── トランジション ── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;

  /* ── フォーカスリング（アクセシビリティ）── */
  --focus-ring: 0 0 0 3px rgba(76, 175, 80, 0.5);
}

/* ════════════════════════════════════════════════════
   v8.7+ 視認性・コントラスト改善トークン (WCAG AA 準拠)
   既存トークンと並行して追加（既存変数は壊さない）
════════════════════════════════════════════════════ */
:root {
  /* テキスト */
  --text-placeholder: #7aad91;          /* ≥ 4.5:1 on dark green inputs */

  /* 入力欄（不透明寄り、境界がはっきり） */
  --input-bg-solid:        #163328;
  --input-bg-focus:        #0f2620;
  --input-border-strong:   #4a9a6e;
  --input-border-focus:    #6ec993;
  --input-text:            #f0f7f2;

  /* ボタン（半透明禁止・常に不透明） */
  --btn-primary-bg-solid:       #2e8a55;
  --btn-primary-bg-solid-hover: #37a365;
  --btn-secondary-text-solid:   #6ec993;
  --btn-secondary-border-solid: #4a9a6e;
  --btn-neutral-bg-solid:       #2a5c42;
  --btn-neutral-bg-solid-hover: #336e50;
  --btn-neutral-text-solid:     #d4edd9;
  --btn-neutral-border-solid:   #4a9a6e;
  --btn-danger-bg-solid:        #b83232;
  --btn-danger-bg-solid-hover:  #d13a3a;

  /* ソート・フィルターボタン */
  --sort-btn-bg:          #1a3d2b;
  --sort-btn-bg-active:   #2e8a55;
  --sort-btn-text:        #c8e6d4;
  --sort-btn-text-active: #ffffff;
  --sort-btn-border:      #4a9a6e;

  /* バッジ（在庫状態など） */
  --badge-out-bg:    #7a1c1c;
  --badge-out-text:  #ffb3b3;
  --badge-out-border:#c94040;
  --badge-low-bg:    #5a3a00;
  --badge-low-text:  #ffd080;
  --badge-low-border:#c87a00;
  --badge-ok-bg:     #1a4d2e;
  --badge-ok-text:   #7ddb9e;
  --badge-ok-border: #2e8a55;
}

/* マルチテーマでの focus-ring もテーマ色に追従させる */
[data-theme="orange"] {
  --focus-ring: 0 0 0 3px rgba(255, 152, 0, 0.5);
  --text-placeholder: #c79a6a;
  --input-bg-solid: #2a1a0a;
  --input-bg-focus: #1e1408;
  --input-border-strong: #c87a00;
  --input-border-focus: #ff9800;
  --btn-primary-bg-solid: #e68900;
  --btn-primary-bg-solid-hover: #ff9800;
  --btn-secondary-text-solid: #ffb74d;
  --btn-secondary-border-solid: #c87a00;
  --btn-neutral-bg-solid: #4a3018;
  --btn-neutral-bg-solid-hover: #5e3e1f;
  --btn-neutral-text-solid: #ffe0b2;
  --btn-neutral-border-solid: #c87a00;
  --sort-btn-bg: #2a1a0a;
  --sort-btn-bg-active: #e68900;
  --sort-btn-text: #ffe0b2;
  --sort-btn-border: #c87a00;
}
[data-theme="blue"] {
  --focus-ring: 0 0 0 3px rgba(66, 165, 245, 0.5);
  --text-placeholder: #6a9ac7;
  --input-bg-solid: #0a1a2e;
  --input-bg-focus: #081428;
  --input-border-strong: #1e88e5;
  --input-border-focus: #42a5f5;
  --btn-primary-bg-solid: #1e88e5;
  --btn-primary-bg-solid-hover: #42a5f5;
  --btn-secondary-text-solid: #90caf9;
  --btn-secondary-border-solid: #1e88e5;
  --btn-neutral-bg-solid: #1a3660;
  --btn-neutral-bg-solid-hover: #234a7a;
  --btn-neutral-text-solid: #bbdefb;
  --btn-neutral-border-solid: #1e88e5;
  --sort-btn-bg: #0a1a2e;
  --sort-btn-bg-active: #1e88e5;
  --sort-btn-text: #bbdefb;
  --sort-btn-border: #1e88e5;
}
[data-theme="white"] {
  --focus-ring:        0 0 0 3px rgba(76, 175, 80, 0.4);
  --color-neutral:        rgba(0, 0, 0, 0.06);
  --color-neutral-border: rgba(0, 0, 0, 0.18);
  --color-neutral-hover:  rgba(0, 0, 0, 0.12);
  --color-neutral-text:   var(--text-main);
  --text-disabled:  rgba(26, 46, 26, 0.30);
  --border-subtle:  rgba(0, 0, 0, 0.08);
  --text-placeholder: #5a7a62;
  --input-bg-solid: #ffffff;
  --input-bg-focus: #f5fdf7;
  --input-border-strong: #4a9a6e;
  --input-border-focus: #2e8a55;
  --input-text: #1a2e1f;
  --btn-primary-bg-solid: #2e8a55;
  --btn-primary-bg-solid-hover: #256040;
  --btn-secondary-text-solid: #2e8a55;
  --btn-secondary-border-solid: #4a9a6e;
  --btn-neutral-bg-solid: #e8f5ee;
  --btn-neutral-bg-solid-hover: #d4edd9;
  --btn-neutral-text-solid: #1a3d2b;
  --btn-neutral-border-solid: #4a9a6e;
  --sort-btn-bg: #e8f5ee;
  --sort-btn-bg-active: #2e8a55;
  --sort-btn-text: #1a3d2b;
  --sort-btn-border: #4a9a6e;
  --badge-out-bg:    #ffe0e0;
  --badge-out-text:  #8a1a1a;
  --badge-out-border:#c94040;
  --badge-low-bg:    #fff4dc;
  --badge-low-text:  #7a4a00;
  --badge-low-border:#c87a00;
  --badge-ok-bg:     #e0f5e8;
  --badge-ok-text:   #1a5a30;
  --badge-ok-border: #2e8a55;
}

/* ══════════════════════════════════════════════════
   テーマ: ピュアホワイト
══════════════════════════════════════════════════ */
[data-theme="white"] {
  --bg-grad: linear-gradient(145deg, #f5f7f5 0%, #e8efe8 45%, #f0f5f0 75%, #edf2ed 100%);
  --card-bg:     rgba(255,255,255,0.88);
  --card-border: rgba(0,0,0,0.10);
  --shadow:      0 4px 24px rgba(0,0,0,0.08);
  --shadow-sm:   0 2px 12px rgba(0,0,0,0.05);
  --text-main:   #1a2e1a;
  --text-sub:    rgba(26,46,26,0.70);
  --text-muted:  rgba(26,46,26,0.50);
  --input-bg:     rgba(255,255,255,0.95);
  --input-border: rgba(0,0,0,0.18);
  --select-opt-bg: #fff;
  --header-bg:   rgba(255,255,255,0.92);
  --nav-bg:      linear-gradient(160deg, #f8faf8 0%, #e8f0e8 60%, #f0f4f0 100%);
  --modal-bg:    #ffffff;
  --green-dark:  #e8f0e8;
  --link:        #1976d2;
  --danger:      #d32f2f;
}

/* ══════════════════════════════════════════════════
   テーマ: サンセットオレンジ
══════════════════════════════════════════════════ */
[data-theme="orange"] {
  --bg-grad: linear-gradient(145deg, #2a1a0a 0%, #3d2a14 45%, #4a3018 75%, #1e1408 100%);
  --accent:       #ff9800;
  --accent-hover: #e68900;
  --accent-pale:  #ffe0b2;
  --green-light:  #ff9800;
  --green-main:   #e68900;
  --green-mid:    #3d2a14;
  --green-dark:   #2a1a0a;
  --green-pale:   #ffe0b2;
  --card-border:  rgba(255,152,0,0.15);
  --select-opt-bg: #2a1a0a;
  --header-bg:   rgba(42,26,10,0.92);
  --nav-bg:      linear-gradient(160deg, #2a1a0a 0%, #3d2a14 60%, #1e1408 100%);
  --modal-bg:    #2a1a0a;
  --yellow:      #ffcc02;
}

/* ══════════════════════════════════════════════════
   テーマ: オーシャンブルー
══════════════════════════════════════════════════ */
[data-theme="blue"] {
  --bg-grad: linear-gradient(145deg, #0a1a2e 0%, #142a4a 45%, #1a3660 75%, #081428 100%);
  --accent:       #42a5f5;
  --accent-hover: #1e88e5;
  --accent-pale:  #bbdefb;
  --green-light:  #42a5f5;
  --green-main:   #1e88e5;
  --green-mid:    #142a4a;
  --green-dark:   #0a1a2e;
  --green-pale:   #bbdefb;
  --card-border:  rgba(33,150,243,0.15);
  --select-opt-bg: #0a1a2e;
  --header-bg:   rgba(10,26,46,0.92);
  --nav-bg:      linear-gradient(160deg, #0a1a2e 0%, #142a4a 60%, #081428 100%);
  --modal-bg:    #0a1a2e;
  --yellow:      #ffc107;
  --link:        #90caf9;
}