@charset "UTF-8";

/* =============================================================================
 *  FUNDI Design Tokens
 *  -----------------------------------------------------------------------------
 *  共通デザイントークン定義（Phase 5 整備）
 *
 *  - 一般ページ・マイページ双方で使用することを想定
 *  - 既存 CSS は触らず、本ファイルは並走配置のみ
 *  - 既存HTMLからはまだ参照されていない（Phase 6 以降の components / pages で利用予定）
 *
 *  参考:
 *    docs/design-audit/02-css-diff.md
 *    docs/design-audit/03-design-tokens.md
 *
 *  単位前提:
 *    html { font-size: 62.5% } (= 1rem = 10px) を将来採用する想定。
 *    現状の html font-size 拡縮設計を撤去するまでは、本トークンの rem 値が
 *    描画サイズと一致しない viewport があることに注意。
 *
 *  命名規約:
 *    --color-*       色
 *    --font-*        font-family / font-size
 *    --leading-*     line-height
 *    --tracking-*    letter-spacing
 *    --space-*       margin / padding / gap 用スケール
 *    --radius-*      border-radius
 *    --shadow-*      box-shadow
 *    --bp-*          breakpoint (CSS変数として参照用、@media 内では値直書き)
 *    --z-*           z-index
 *    --container-*   コンテナ幅
 *    --btn-*         ボタン関連
 *    --form-*        フォーム関連
 *    --transition-*  アニメーション
 *
 * ============================================================================= */

:root {
  /* ==========================================================================
   * 1. Color — Brand
   *    FUNDI ブランド緑 #56B25D を中核に、濃淡と背景色を体系化
   * ========================================================================== */
  --color-brand:        #56B25D; /* メイン緑。タグ/淡背景/装飾など「非文字」用途 */
  --color-brand-dark:   #0C8816; /* 塗りCTAの地色・緑テキスト(白/白地で4.63:1, AA) */
  --color-brand-darker: #0A7012; /* 塗りCTAの hover / active */
  --color-brand-light:  #EAF7EC; /* 緑系の極淡背景（success bg） */
  --color-brand-bg:     #E6F4E9; /* 緑系の淡背景（タグ・チップ） */

  /* ==========================================================================
   * 2. Color — Text
   * ========================================================================== */
  --color-text:         #192C3C; /* 本文 */
  --color-text-muted:   #707070; /* ラベル、補助情報 */
  --color-text-subtle:  #A1A1A1; /* placeholder、無効テキスト */
  --color-text-inverse: #FFFFFF; /* 暗背景上の文字 */

  /* ==========================================================================
   * 3. Color — Surface / Background
   * ========================================================================== */
  --color-bg:           #FFFFFF;            /* ベース（公開・カード） */
  --color-bg-subtle:    #F8F8F8;            /* セクション境界 */
  --color-bg-muted:     #F2F2F4;            /* マイページ全体地色 */
  --color-bg-dark:      #192C3C;            /* フッター、サイドバー、ヘッダー強調 */
  --color-bg-overlay:   rgba(0, 0, 0, 0.5); /* モーダルオーバーレイ */

  /* ==========================================================================
   * 4. Color — Border
   * ========================================================================== */
  --color-border:        #DEDEDE;
  --color-border-strong: #C8C8C8;
  --color-border-soft:   #E5E5E5;

  /* ==========================================================================
   * 5. Color — Status (Semantic)
   *    意味色。フォアグラウンドとバックグラウンドのペアで管理
   * ========================================================================== */
  --color-success:    #0C8816;
  --color-success-bg: #E6F4E9;

  --color-warning:    #B7791F;
  --color-warning-bg: #FFF6E0;

  --color-error:    #D93025;
  --color-error-bg: #FDECEA;

  --color-info:    #2F6DD0;
  --color-info-bg: #E8F0FB;

  --color-muted-bg: #F0F0F2;

  /* ==========================================================================
   * 6. Color — Palette (Syntactic, Status Badge)
   *    ファンド状態の差別化用カラーチップ。意味色との二重命名は OK
   * ========================================================================== */
  --color-blue:        #2F6DD0; /* 入金、申込中 */
  --color-sky:         #39B6D9; /* 補助情報、運用中 */
  --color-green:       #0C8816; /* 成功、収益、利益 (= --color-brand-dark) */
  --color-green-light: #56B25D; /* 運用準備中 (= --color-brand) */
  --color-orange:      #F08428; /* 期間限定、注目訴求 */
  --color-pink:        #E26175; /* 抽選、特殊枠 */
  --color-red:         #F05B56; /* 損益マイナス、損失 */
  --color-gold:        #9F6A01; /* 上位ステータス、特典 */

  /* ==========================================================================
   * 7. Font Family
   * ========================================================================== */
  --font-family-base:    "Inter", "Noto Sans JP", "Hiragino Sans",
                         "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,
                         "游ゴシック Medium", YuGothic, YuGothicM, sans-serif;
  --font-family-en:      "Inter", sans-serif;
  --font-family-display: "Bebas Neue", "Inter", sans-serif; /* 公開LPのみ採用想定 */

  /* ==========================================================================
   * 8. Font Size Scale
   *    html { font-size: 62.5% } 前提 (1rem = 10px)
   * ========================================================================== */
  --font-2xs:  1.0rem; /* 10px - 補助メタ情報 */
  --font-xs:   1.2rem; /* 12px - 注釈、microcopy */
  --font-sm:   1.3rem; /* 13px - キャプション */
  --font-base: 1.4rem; /* 14px - ラベル、メタ */
  --font-md:   1.6rem; /* 16px - ★本文標準 */
  --font-lg:   1.8rem; /* 18px - リード文、小見出し */
  --font-xl:   2.0rem; /* 20px - h3 相当 */
  --font-2xl:  2.4rem; /* 24px - h2 相当 */
  --font-3xl:  2.8rem; /* 28px - 重要見出し */
  --font-4xl:  3.2rem; /* 32px - ページタイトル */
  --font-5xl:  3.6rem; /* 36px - 大見出し */
  --font-6xl:  4.8rem; /* 48px - LP Hero */
  --font-7xl:  6.4rem; /* 64px - LP 利回り訴求 */

  /* ==========================================================================
   * 9. Line Height
   * ========================================================================== */
  --leading-tight:   1.25; /* 見出し、ステータスバッジ */
  --leading-snug:    1.4;  /* 行間を詰めたい大見出し */
  --leading-base:    1.6;  /* ★本文標準 */
  --leading-relaxed: 1.75; /* 説明文、長文 */

  /* ==========================================================================
   * 10. Letter Spacing
   *     em ベース統一（rem や px は非推奨）
   * ========================================================================== */
  --tracking-tight: -0.01em;
  --tracking-base:  0;       /* ★本文標準 */
  --tracking-wide:  0.04em;  /* 英大文字、ボタンラベル */
  --tracking-wider: 0.08em;  /* 短い英語見出し */

  /* ==========================================================================
   * 11. Spacing Scale
   * ========================================================================== */
  --space-0:   0;
  --space-2xs: 0.4rem; /* 4px */
  --space-xs:  0.8rem; /* 8px */
  --space-sm:  1.2rem; /* 12px - よく使う密度 */
  --space-md:  1.6rem; /* 16px - 標準 */
  --space-lg:  2.0rem; /* 20px */
  --space-xl:  2.4rem; /* 24px - セクション内 */
  --space-2xl: 3.2rem; /* 32px - セクション間 */
  --space-3xl: 4.0rem; /* 40px */
  --space-4xl: 4.8rem; /* 48px - ページ余白 */
  --space-5xl: 6.4rem; /* 64px - LP 余白 */
  --space-6xl: 8.0rem; /* 80px - LP セクション余白 */

  /* ==========================================================================
   * 12. Radius
   * ========================================================================== */
  --radius-none:   0;
  --radius-xs:     0.2rem;  /* 2px - 微細な角丸 */
  --radius-sm:     0.4rem;  /* 4px - 小ボタン、ラベル */
  --radius-md:     0.8rem;  /* 8px - ★標準（カード、入力欄、ボタン） */
  --radius-lg:     1.2rem;  /* 12px - 大カード */
  --radius-xl:     1.6rem;  /* 16px - パネル、モーダル */
  --radius-pill:   9999px;  /* バッジ、タグ */
  --radius-circle: 50%;     /* アバター */

  /* ==========================================================================
   * 13. Shadow
   *     base color は #192C3C (rgba)。LP訴求は --shadow-emphasis を使う
   * ========================================================================== */
  --shadow-none:      none;
  --shadow-sm:        0 0.2rem 0.4rem rgba(25, 44, 60, 0.06);
  --shadow-md:        0 0.4rem 1.2rem rgba(25, 44, 60, 0.08);
  --shadow-lg:        0 0.8rem 2.0rem rgba(25, 44, 60, 0.10);
  --shadow-emphasis:  0 1.2rem 3.2rem rgba(25, 44, 60, 0.14);
  --shadow-focus:     0 0 0 0.2rem rgba(86, 178, 93, 0.30);   /* brand focus ring */
  --shadow-focus-err: 0 0 0 0.2rem rgba(217, 48, 37, 0.30);   /* error focus ring */

  /* ==========================================================================
   * 14. Breakpoint (参照用変数。@media 内では値を直書きする)
   * ========================================================================== */
  --bp-sp:      768px;  /* SP上限。769px 以上は tablet 以上 */
  --bp-tablet:  1024px; /* タブレット上限 */
  --bp-desktop: 1200px; /* デスクトップ閾値（マイページのサイドバー出現） */

  /* ==========================================================================
   * 15. Container Width
   * ========================================================================== */
  --container-sp-padding: 1.6rem; /* 16px */
  --container-pc-padding: 2.4rem; /* 24px */
  --container-narrow:     80rem;  /* 800px - ログイン・フォーム単体 */
  --container-base:       120rem; /* 1200px - 公開ページ標準 */
  --container-wide:       134rem; /* 1340px - マイページ管理画面 */

  /* ==========================================================================
   * 16. Z-Index
   * ========================================================================== */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300; /* header */
  --z-drawer:   400; /* SPサイドナビ */
  --z-modal:    500; /* モーダル */
  --z-popover:  600; /* tooltip、ポップオーバー */
  --z-toast:    700;

  /* ==========================================================================
   * 17. Button Size
   *     min-height のスケール。LP CTA は --btn-h-hero を使う
   * ========================================================================== */
  --btn-h-xs:   2.8rem; /* 28px - インラインバッジ風ボタン */
  --btn-h-sm:   3.6rem; /* 36px - 小ボタン（テーブル行内） */
  --btn-h-md:   4.4rem; /* 44px - ★標準（マイ） */
  --btn-h-lg:   4.8rem; /* 48px - 大（フォーム送信） */
  --btn-h-xl:   5.6rem; /* 56px - LP CTA */
  --btn-h-hero: 6.4rem; /* 64px - LP Hero CTA（公開既存6.2rem相当） */

  /* ==========================================================================
   * 18. Form Size
   * ========================================================================== */
  --form-h:          4.4rem; /* 44px - input, select, textarea-min */
  --form-textarea-h: 20rem;  /* 200px - textarea 初期高さ */

  /* ==========================================================================
   * 19. Transition
   * ========================================================================== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* ==========================================================================
   *  *** Phase 6-F 追補 ***
   *  -------------------------------------------------------------------------
   *  Phase 6-A〜E（button / badge / form / card / table）の各コンポーネント
   *  CSS で必要になったトークンを統合追加。既存トークンの値は変更しない。
   *  破壊的変更なし、すべて新規追加のみ。
   * ========================================================================== */

  /* ==========================================================================
   * 20. Font Weight
   *
   *     button / badge / form / card / table 共通の要望。
   *     CSS 内のハードコード 700 / 400 を集約。
   * ========================================================================== */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* ==========================================================================
   * 21. Icon Size
   *
   *     button / badge の内部アイコンサイズ。
   *     font-size のスケールと意味的に揃えるが値は別管理（icon は line-height
   *     の影響を受けないため、別軸の方が運用しやすい）。
   * ========================================================================== */
  --icon-2xs: 1.0rem; /* 10px */
  --icon-xs:  1.2rem; /* 12px - badge default */
  --icon-sm:  1.4rem; /* 14px */
  --icon-md:  1.6rem; /* 16px - button default */
  --icon-lg:  2.0rem; /* 20px */
  --icon-xl:  2.4rem; /* 24px */

  /* ==========================================================================
   * 22. Tag / Badge dimensions
   *
   *     - badge の min-height スケール
   *     - form の required/optional マークなど、より小さい padding 値
   * ========================================================================== */
  --badge-h-sm:    1.8rem; /* 18px */
  --badge-h-md:    2.0rem; /* 20px - badge default */
  --badge-h-lg:    2.8rem; /* 28px */
  --tag-padding-y: 0.1rem; /* 1px */
  --tag-padding-x: 0.6rem; /* 6px */
  --tag-font-size: var(--font-xs); /* 12px */

  /* ==========================================================================
   * 23. Form-specific
   * ========================================================================== */
  --check-size:         1.8rem; /* 18px - checkbox / radio */
  --form-label-w:       18rem;  /* 180px - horizontal layout label width */
  --form-note-border-w: 0.3rem; /* 3px - 注意文ボックスの左ボーダー */

  /* ==========================================================================
   * 24. Aspect Ratio (Fund Card)
   * ========================================================================== */
  --aspect-fund-default:  16 / 10; /* default fund card image */
  --aspect-fund-promo:    16 / 9;  /* LP訴求カード */
  --aspect-fund-holding:  16 / 12; /* マイ保有カード */
  --aspect-fund-compact:  1 / 1;   /* compact カード（正方形） */

  /* ==========================================================================
   * 25. Progress
   * ========================================================================== */
  --progress-h: 0.6rem; /* 6px - progress bar height */

  /* ==========================================================================
   * 26. Placeholder (image / data の空状態)
   * ========================================================================== */
  --color-placeholder-bg: var(--color-bg-muted);
  --color-placeholder-fg: var(--color-text-subtle);

  /* ==========================================================================
   * 27. Fund Card Media Width
   * ========================================================================== */
  --fund-card-media-w-holding: 28rem; /* 280px - holding 横並びカードのサムネ */
  --fund-card-media-w-compact: 12rem; /* 120px - compact カードのサムネ */

  /* ==========================================================================
   * 28. Closed / Disabled visual treatment
   * ========================================================================== */
  --closed-filter: grayscale(0.5);

  /* ==========================================================================
   * 29. Status Palette Background (Soft)
   *
   *     §6 Status Palette の色相に対応する淡色背景。
   *     badge --soft / table row state / form 補助メッセージで利用。
   * ========================================================================== */
  --color-blue-bg:   #E8F0FB;
  --color-sky-bg:    #E4F4FA;
  --color-orange-bg: #FDEFE4;
  --color-pink-bg:   #FBE7EB;
  --color-red-bg:    #FDECEA;
  --color-gold-bg:   #F7EFD7;

  /* ==========================================================================
   * 30. Table / Data List
   * ========================================================================== */
  --table-min-w-scroll:   60rem;            /* 600px - responsive-scroll の最低幅 */
  --table-cell-padding-y: var(--space-md);  /* 16px */
  --table-cell-padding-x: var(--space-md);  /* 16px */
  --data-list-gap:        var(--space-md);
  --data-list-item-pad:   var(--space-md);

  /* ==========================================================================
   * 31. Numeric font-feature
   *
   *     金額・日付の桁揃え用。
   *     利用例: font-feature-settings: var(--numeric-font-feature);
   * ========================================================================== */
  --numeric-font-feature: "tnum" 1;

  /* ==========================================================================
   * 32. Responsive Foundation
   *
   *     レスポンシブ・ブラッシュアップで使用する fluid layout 用トークン群。
   *     後続作業で実際に消費されることが前提。既存変数の値は変更しない。
   *
   *     - --container-gutter: ページ外側のフルイド padding。
   *       使用例: width: min(100% - 2 * var(--container-gutter), var(--container-base));
   *     - --card-grid-min / --card-grid-min-compact: auto-fit minmax 用の最小列幅。
   *       使用例: grid-template-columns:
   *         repeat(auto-fit, minmax(min(100%, var(--card-grid-min)), 1fr));
   *     - --card-grid-gap: 上記 grid の標準 gap (--space-xl の別名)。
   *     - --bp-laptop: 14 番の breakpoint 群に追加する中間ブレーク。
   *       mypage sidebar の出現境界 (>=1024px) として使用する。
   *     - --sidebar-width-fluid: mypage サイドバー幅を laptop+ で適用する fluid 値。
   *       既存の --sidebar-width (mypage/base.css の 28rem 固定) は維持しつつ、
   *       新名で並走させる。
   * ========================================================================== */
  --container-gutter:      clamp(1.6rem, 4vw, 2.4rem); /* 16〜24px */

  --card-grid-min:         28rem; /* 280px - 一般カードグリッド (fund-list 等) */
  --card-grid-min-compact: 22rem; /* 220px - コンパクトカードグリッド (news 等) */
  --card-grid-gap:         var(--space-xl); /* 24px */

  --bp-laptop:             1024px; /* mypage sidebar 出現境界 */

  --sidebar-width-fluid:   clamp(20rem, 18vw, 24rem); /* 200〜240px */
}

/* =============================================================================
 *  END OF FILE
 *  -----------------------------------------------------------------------------
 *  本ファイルは tokens 定義のみを行い、要素セレクタや @media は持たない。
 *  base.css 等の実装は別ファイルで行うこと。
 * ============================================================================= */