/* =============================================================
 *  レッツリアル デザイントークン（CSS 変数の単一ソース）
 *
 *  目的:
 *    サイト全体の色・余白・角丸・影・フォント等の「正解値」を
 *    1ファイルに集約し、各ページの CSS から var(--lr-*) で参照する。
 *    値の出どころが散らばっている状態（青6系統・グレー6値など）を
 *    段階的にここへ寄せていくための土台。
 *
 *  命名規則:
 *    --lr- プレフィックス（レッツリアル名前空間）。
 *    Element UI / Bootstrap / iView 等のライブラリ変数と衝突しないこと。
 *
 *  値の出典（一次ソース）:
 *    - catalog/view/theme/newstore/stylesheet/letsreal.css 冒頭コメント (L9-17)
 *    - catalog/view/theme/newstore/stylesheet/developer-form.css 全般
 *    - catalog/view/theme/newstore/template/potofolio/potofolio.tpl（損益色）
 *    - catalog/view/theme/newstore/template/potofolio/ranking.tpl（ランキング配色）
 *
 *  運用ルール:
 *    1) 新規 CSS では生 hex の直書きを避け、必ずトークンを参照する。
 *    2) 既存コードは塩漬け。画面を触るタイミングで順次 var() に寄せる。
 *    3) 新しい青・新しいグレーを増やさない。必要なら既存トークンに用途別の
 *       バリアントを追加する形で拡張する。
 *    4) ガイドラインは docs/ui-guideline.md。判断に迷ったら参照する。
 *
 *  読み込み:
 *    本ファイルは現時点では header.php へ未登録（＝サイト表示に影響しない）。
 *    最初に var(--lr-*) を参照する画面を触るタイミングで、
 *    catalog/controller/common/header.php の NewstoreMinifier に追加する。
 * ============================================================= */

:root {

    /* =========================================================
     *  カラー：プライマリ（ブランド青）
     *  方針：青はこの系統のみ。新しい青を追加しない。
     *  レガシー値（#2b8cdb / #2d8cf0 / #3399ff / #0369cf / #1989fa）は
     *  画面を触るタイミングで --lr-color-primary に寄せていく。
     * ========================================================= */
    --lr-color-primary: #409eff;          /* ブランド基本色 */
    --lr-color-primary-hover: #66b1ff;    /* ボタン/リンク hover */
    --lr-color-primary-active: #0f4cb0;   /* フォーカス時のテキスト強調等 */
    --lr-color-primary-bg: #ecf5ff;       /* 編集中セルの背景（focus-within） */
    --lr-color-primary-bg-soft: #f0f7ff;  /* テーブル行 hover / ヘッダー背景 */
    --lr-color-primary-bg-softer: #f1f6fc;/* ラベル hover */
    --lr-color-primary-bg-label: #dceeff; /* フォーカス中のラベル背景 */
    --lr-color-primary-glow: rgba(64, 158, 255, 0.12); /* focus ring 用 alpha */

    /* =========================================================
     *  カラー：テキスト
     *  4段階（title / body / label / muted / placeholder）。
     *  レガシー値（#333 / #303133 / #606266 / #515a6e）は順次寄せる。
     * ========================================================= */
    --lr-text-title: #121620;        /* 見出し・ページタイトル */
    --lr-text-body: #1e2a36;         /* 本文・入力値・データ */
    --lr-text-label: #363c48;        /* フォームラベル・セカンダリ */
    --lr-text-muted: #909399;        /* 補助テキスト・注釈（Element UI 準拠） */
    --lr-text-placeholder: #b0b6bf;  /* プレースホルダー */
    --lr-text-on-primary: #ffffff;   /* プライマリ色背景上のテキスト */

    /* =========================================================
     *  カラー：サーフェス（背景）
     * ========================================================= */
    --lr-surface: #ffffff;           /* カード本体・入力セル */
    --lr-surface-sub: #f8f9fb;       /* ラベル列・テーブルヘッダ */
    --lr-surface-hover: #fafcff;     /* ストライプ行・hover 行の入力列 */
    --lr-surface-page: #f5f5f5;      /* ページ全体背景（必要時のみ） */

    /* =========================================================
     *  カラー：ボーダー / 区切り線
     * ========================================================= */
    --lr-border: #ebeef5;            /* 標準区切り線（Element UI 互換） */
    --lr-border-strong: #dcdfe6;     /* 入力枠・強めの区切り */
    --lr-border-radio: #c0c4cc;      /* ラジオ/チェックボックスの未選択枠 */

    /* =========================================================
     *  カラー：状態色（success / warning / danger / info）
     *  方針：Element UI 標準を尊重。レガシー値は順次寄せる。
     * ========================================================= */
    --lr-color-success: #67c23a;     /* 成功・有効（Element UI 標準） */
    --lr-color-warning: #e6a23c;     /* 注意・警告（letsreal.css 既定義と一致） */
    --lr-color-danger: #f56c6c;      /* エラー・損失強調（Element UI 標準） */
    --lr-color-info: #909399;        /* 情報・補助 */
    --lr-color-required: #e74c3c;    /* 必須マーク（フォーム赤★） */

    /* =========================================================
     *  カラー：損益（FX 専用セマンティクス）
     *  方針:
     *    - レッツリアルの基本ルールは「マイナスのみ赤強調、プラスは通常色」
     *      （potofolio.tpl で確立。プラス=#000/#303133、マイナス=#f56c6c）
     *    - ランキング系（ranking.tpl）は positive/negative を両方色付け
     *    - 通常は --lr-loss だけを使い、profit は本文色のままにする
     * ========================================================= */
    --lr-profit: #10b981;            /* 利益強調（ランキング等の比較表で使用） */
    --lr-loss: #f56c6c;              /* 損失強調（全画面共通） */

    /* =========================================================
     *  装飾：グラデーション（既存資産を維持）
     * ========================================================= */
    --lr-coupon-gradient: linear-gradient(135deg,#f97316 0%,#ef4444 20%,#ec4899 40%,#8b5cf6 60%,#3b82f6 80%,#06b6d4 100%);
    /* 互換エイリアス：既存の letsreal.css L470 の --nm-coupon-gradient と同値 */
    --nm-coupon-gradient: var(--lr-coupon-gradient);

    /* =========================================================
     *  スペーシング（4の倍数スケール）
     *  既存テンプレで頻出する 4 / 8 / 12 / 16 / 20 / 24px を採用。
     *  半端値（10 / 13 / 15 px）は新規実装で使わない。
     * ========================================================= */
    --lr-space-xs: 4px;
    --lr-space-sm: 8px;
    --lr-space-md: 12px;
    --lr-space-lg: 16px;
    --lr-space-xl: 20px;
    --lr-space-2xl: 24px;
    --lr-space-3xl: 32px;
    --lr-space-4xl: 40px;

    /* =========================================================
     *  角丸（border-radius）
     * ========================================================= */
    --lr-radius-sm: 4px;             /* 入力・小ボタン */
    --lr-radius-md: 6px;             /* カード・コンテナ */
    --lr-radius-lg: 12px;            /* 大型カード・モーダル */
    --lr-radius-full: 50%;           /* アイコン・バッジ円形 */

    /* =========================================================
     *  ボーダー幅
     * ========================================================= */
    --lr-bw-1: 1px;                  /* 標準区切り */
    --lr-bw-2: 2px;                  /* 強調枠・ページヘッダー下線 */
    --lr-bw-3: 3px;                  /* 左アクセントバー */

    /* =========================================================
     *  影（box-shadow）
     * ========================================================= */
    --lr-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);                            /* 標準カード */
    --lr-shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.10);                       /* カード hover */
    --lr-shadow-focus: 0 0 0 3px rgba(64, 158, 255, 0.12);                        /* 入力フォーカス ring */
    --lr-shadow-inset-active: inset 3px 0 0 #409eff;                              /* 行アクティブの左バー */
    --lr-shadow-elevated: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03); /* FAQ 等 */

    /* =========================================================
     *  フォント
     * ========================================================= */
    --lr-font-family: "MS PGothic", Arial, "Hiragino Kaku Gothic ProN", Osaka, sans-serif;
    --lr-font-family-display: "Roboto Condensed", var(--lr-font-family);

    --lr-fs-xs: 12px;                /* 注釈・補足 */
    --lr-fs-sm: 13px;                /* テーブル・小ラベル */
    --lr-fs-md: 14px;                /* 本文基準 */
    --lr-fs-lg: 16px;                /* 中見出し */
    --lr-fs-xl: 18px;                /* 大見出し・h3 */
    --lr-fs-2xl: 20px;               /* ページタイトル */

    --lr-fw-normal: 400;
    --lr-fw-medium: 500;             /* ラベル・強調 */
    --lr-fw-bold: 600;               /* 見出し */
    --lr-fw-heavy: 700;              /* ページタイトル（控えめに） */

    --lr-lh-tight: 1.4;
    --lr-lh-base: 1.6;

    /* =========================================================
     *  トランジション
     * ========================================================= */
    --lr-transition-fast: 0.15s ease;        /* ホバー・行ハイライト */
    --lr-transition-base: 0.2s ease;         /* 標準 */
    --lr-transition-slow: 0.3s ease;         /* メニュー展開等 */

    /* =========================================================
     *  z-index 階層（無秩序状態を整理する基準）
     *  既存値の散らばり（1〜100002）はここを基準に順次整理する。
     * ========================================================= */
    --lr-z-base: 1;
    --lr-z-sticky: 100;
    --lr-z-header: 888;              /* 既存のヘッダー sticky と互換 */
    --lr-z-dropdown: 1000;
    --lr-z-modal-backdrop: 1040;
    --lr-z-modal: 1050;
    --lr-z-popover: 1060;
    --lr-z-tooltip: 1070;
    --lr-z-toast: 1080;

    /* =========================================================
     *  レイアウト定数
     * ========================================================= */
    --lr-form-label-width: 220px;    /* 出品者フォームのラベル列固定幅 */
    --lr-row-min-height: 52px;       /* フォーム行・テーブル行の最小高さ */

    /* =========================================================
     *  ブレイクポイント（参考値）
     *  @media では CSS 変数を使えないため、値を直接記述する際は
     *  以下と一致させること。
     *    SP / PC 境界: 768px
     *    lg: 992px
     *    xl: 1200px
     * ========================================================= */
}