/**
 * sys-tre.com Design System — tokens.css
 * Phase 1 成果物 (2026-04-22)
 * ----------------------------------------------------------
 * 使い方:
 *   1) Astra子テーマの functions.php で wp_enqueue_style 登録
 *   2) 全LP/ページの <style> 内で var(--ds-*) を参照
 *   3) 個別の色/余白はトークン経由以外使用禁止
 * ----------------------------------------------------------
 * 変更ルール:
 *   - トークン名は破壊的変更禁止（既存LPが全部壊れる）
 *   - 新規トークン追加は DESIGN_SYSTEM.md の合意後
 *   - 値変更は Phase責任者 + バックアップ必須
 */

:root {
  /* ==========================================================
     1. BRAND COLOR
     ========================================================== */
  --ds-primary:        #FF7A3D;   /* メインオレンジ */
  --ds-primary-dark:   #FF5100;   /* hover/active */
  --ds-primary-light:  #FFB387;   /* 淡 */
  --ds-primary-bg:     #FFF3E8;   /* バッジ背景・セクション背景 */
  --ds-primary-ghost:  rgba(255, 122, 61, .10);

  /* ==========================================================
     2. DARK COLOR (ヒーロー・フッター用)
     ========================================================== */
  --ds-dark-deep:      #0D0B09;   /* 最深（大型ヒーロー背景） */
  --ds-dark:           #1E1810;   /* 標準ダーク */
  --ds-dark-surface:   #2A2119;   /* カード on ダーク */

  /* ==========================================================
     3. GRAY SCALE (ニュートラル — ブラウン寄り)
     ========================================================== */
  --ds-gray-900:       #1E1810;
  --ds-gray-800:       #3D3128;
  --ds-gray-700:       #4A3E35;
  --ds-gray-600:       #575250;
  --ds-gray-500:       #6B6560;
  --ds-gray-400:       #9B9691;
  --ds-gray-300:       #D4CFCA;
  --ds-gray-200:       #E8E4E0;
  --ds-gray-100:       #F4F1EE;
  --ds-gray-50:        #F8F5F4;

  /* ==========================================================
     4. SEMANTIC COLOR
     ========================================================== */
  --ds-success:        #16A34A;
  --ds-success-bg:     #DCFCE7;
  --ds-danger:         #DC2626;
  --ds-danger-bg:      #FEE2E2;
  --ds-warning:        #F59E0B;
  --ds-warning-bg:     #FEF3C7;
  --ds-info:           #2563EB;
  --ds-info-bg:        #DBEAFE;
  --ds-gold:           #FFD700;   /* ★ランキング・星評価専用。ブランド色ではない */

  /* ==========================================================
     5. TEXT COLOR
     ========================================================== */
  --ds-text:           #1E1810;   /* 本文デフォルト */
  --ds-text-sub:       #575250;   /* サブ本文 */
  --ds-text-muted:     #6B6560;   /* 補助情報 */
  --ds-text-inverse:   #FFFFFF;   /* ダーク背景上 */
  --ds-text-on-primary: #FFFFFF;  /* Primary ボタン上 */
  --ds-text-link:      #FF5100;   /* リンクは primary-dark（可読性） */
  --ds-text-link-hover: #C53D00;

  /* ==========================================================
     6. SURFACE / BORDER
     ========================================================== */
  --ds-surface:        #FFFFFF;
  --ds-surface-alt:    #F8F5F4;   /* セクション背景 */
  --ds-surface-warm:   #FFF8F5;   /* 暖色アクセント背景 */
  --ds-surface-card:   #FFFFFF;
  --ds-border:         #E8E4E0;
  --ds-border-strong:  #D4CFCA;
  --ds-border-dark:    rgba(255, 255, 255, .12);  /* ダーク背景上の境界 */

  /* ==========================================================
     7. TYPOGRAPHY — FAMILY
     ========================================================== */
  --ds-font-jp:   'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --ds-font-en:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-mono: 'Inter', 'SF Mono', Consolas, 'Courier New', monospace;

  /* ==========================================================
     8. TYPOGRAPHY — SCALE (clamp でレスポンシブ)
     ========================================================== */
  --ds-text-display: clamp(2.5rem, 5vw, 4rem);      /* 40 → 64px */
  --ds-text-h1:      clamp(1.75rem, 4vw, 3rem);     /* 28 → 48px */
  --ds-text-h2:      clamp(1.5rem, 3vw, 2.25rem);   /* 24 → 36px */
  --ds-text-h3:      clamp(1.25rem, 2vw, 1.5rem);   /* 20 → 24px */
  --ds-text-h4:      1.125rem;                      /* 18px */
  --ds-text-body:    1rem;                          /* 16px */
  --ds-text-sm:      0.875rem;                      /* 14px */
  --ds-text-xs:      0.75rem;                       /* 12px */

  /* ==========================================================
     9. TYPOGRAPHY — WEIGHT / LH / LS
     ========================================================== */
  --ds-fw-regular:   400;
  --ds-fw-medium:    500;
  --ds-fw-bold:      700;
  --ds-fw-black:     900;

  --ds-lh-tight:     1.25;    /* Display・H1 */
  --ds-lh-heading:   1.4;     /* H2-H4 */
  --ds-lh-body:      1.75;    /* 本文（日本語可読） */
  --ds-lh-loose:     1.9;     /* 長文 */

  --ds-ls-tight:     -0.02em; /* Display で締める */
  --ds-ls-normal:    0;
  --ds-ls-wide:      0.05em;  /* 英語キャプション */

  /* ==========================================================
     10. SPACING (4pt グリッド)
     ========================================================== */
  --ds-space-0:      0;
  --ds-space-1:      4px;
  --ds-space-2:      8px;
  --ds-space-3:      12px;
  --ds-space-4:      16px;
  --ds-space-5:      20px;
  --ds-space-6:      24px;
  --ds-space-7:      28px;
  --ds-space-8:      32px;
  --ds-space-10:     40px;
  --ds-space-12:     48px;
  --ds-space-14:     56px;
  --ds-space-16:     64px;
  --ds-space-20:     80px;
  --ds-space-24:     96px;
  --ds-space-32:     128px;

  /* セクション上下余白（clamp レスポンシブ） */
  --ds-section-y:    clamp(3rem, 8vw, 6rem);       /* 48 → 96px */
  --ds-section-y-lg: clamp(4rem, 10vw, 8rem);      /* 64 → 128px */

  /* ==========================================================
     11. CONTAINER
     ========================================================== */
  --ds-container-xs:   480px;
  --ds-container-sm:   640px;
  --ds-container:      1100px;   /* ドラフトLP標準 */
  --ds-container-lg:   1300px;
  --ds-container-px:   24px;
  --ds-container-px-sm: 16px;

  /* ==========================================================
     12. RADIUS
     ========================================================== */
  --ds-radius-xs:     4px;
  --ds-radius-sm:     8px;
  --ds-radius:        10px;     /* ボタン・Input 標準 */
  --ds-radius-md:     16px;     /* カード標準（ドラフト踏襲） */
  --ds-radius-lg:     24px;     /* 大型ブロック */
  --ds-radius-xl:     32px;
  --ds-radius-pill:   999px;    /* ピル型CTA */
  --ds-radius-circle: 50%;

  /* ==========================================================
     13. SHADOW
     ========================================================== */
  --ds-shadow-xs:   0 1px 2px rgba(14, 10, 6, .04);
  --ds-shadow-sm:   0 2px 8px rgba(14, 10, 6, .06);
  --ds-shadow:      0 4px 24px rgba(14, 10, 6, .08);  /* ドラフト標準 */
  --ds-shadow-md:   0 8px 32px rgba(14, 10, 6, .10);
  --ds-shadow-lg:   0 16px 48px rgba(14, 10, 6, .14);
  --ds-shadow-inset: inset 0 2px 4px rgba(14, 10, 6, .05);

  /* Focus ring（アクセシビリティ必須） */
  --ds-focus-ring:  0 0 0 3px rgba(255, 122, 61, .30);

  /* Glow (CTA hover 強調) */
  --ds-glow-primary: 0 0 24px rgba(255, 122, 61, .35);

  /* ==========================================================
     14. Z-INDEX
     ========================================================== */
  --ds-z-base:      1;
  --ds-z-dropdown:  100;
  --ds-z-sticky:    200;
  --ds-z-header:    500;
  --ds-z-modal:     999;
  --ds-z-toast:     1500;
  --ds-z-float:     9999;   /* フローティングCTAバー */

  /* ==========================================================
     15. MOTION
     ========================================================== */
  --ds-dur-instant: 80ms;
  --ds-dur-fast:    150ms;
  --ds-dur:         250ms;
  --ds-dur-slow:    400ms;
  --ds-dur-slower:  700ms;
  --ds-ease:        cubic-bezier(.4, 0, .2, 1);
  --ds-ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ds-ease-in:     cubic-bezier(.7, 0, .84, 0);

  /* ==========================================================
     16. BREAKPOINT (JS参照用 — CSSはリテラル)
     ========================================================== */
  --ds-bp-sm: 640px;
  --ds-bp-md: 768px;
  --ds-bp-lg: 1024px;
  --ds-bp-xl: 1280px;

  /* ==========================================================
     17. CURRENCY PAIR COLOR MAP (21種のうち主要11種)
     ========================================================== */
  --ds-pair-usdjpy:  #E63946;   /* 赤・米日 */
  --ds-pair-eurusd:  #2563EB;   /* 青・欧米 */
  --ds-pair-gbpusd:  #4F46E5;   /* 紺・英米 */
  --ds-pair-gbpjpy:  #7C3AED;   /* 濃青紫・英日（戦略アノマリーと被らないよう深め） */
  --ds-pair-eurjpy:  #0EA5E9;   /* 青緑・欧日 */
  --ds-pair-audusd:  #16A34A;   /* 緑・豪米 */
  --ds-pair-nzdusd:  #10B981;   /* 若緑・NZ */
  --ds-pair-usdcad:  #EF4444;   /* 赤朱・加 */
  --ds-pair-usdchf:  #6B7280;   /* グレー・瑞 */
  --ds-pair-xauusd:  #D4A017;   /* 金・ゴールド */
  --ds-pair-xagusd:  #9CA3AF;   /* 銀 */

  /* ==========================================================
     18. STRATEGY COLOR MAP (8戦略)
     ========================================================== */
  --ds-strat-scalp:      #FF5100;   /* スキャル: 鮮やかオレンジ（高速の緊張感） */
  --ds-strat-day:        #FF7A3D;   /* デイトレ: Primary（基準） */
  --ds-strat-swing:      #2563EB;   /* スイング: 青（中長期の落ち着き） */
  --ds-strat-grid:       #10B981;   /* グリッド: 緑（網の目） */
  --ds-strat-martingale: #DC2626;   /* マーチン: 赤（警告） */
  --ds-strat-hedge:      #64748B;   /* ヘッジ: 青灰（守り） */
  --ds-strat-anomaly:    #EC4899;   /* アノマリー: ピンク（紫は絶対NG回避） */
  --ds-strat-morning:    #F59E0B;   /* 朝スキャ: 琥珀（日の出） */

  /* ==========================================================
     19. OPACITY SCALE (Phase 5-A 追加)
     ========================================================== */
  --ds-opacity-0:   0;
  --ds-opacity-5:   0.05;
  --ds-opacity-10:  0.10;
  --ds-opacity-20:  0.20;
  --ds-opacity-40:  0.40;
  --ds-opacity-60:  0.60;
  --ds-opacity-80:  0.80;

  /* ==========================================================
     20. Z-INDEX EXTENSION (tooltip / popover) — Phase 5-A 追加
        既存 --ds-z-dropdown(100) / -sticky(200) / -header(500) /
             -modal(999) / -toast(1500) / -float(9999) の隙間を埋める
     ========================================================== */
  --ds-z-tooltip:   1200;   /* modal(999) と toast(1500) の間 */
  --ds-z-popover:   1100;   /* modal の直上、tooltip の直下 */

  /* ==========================================================
     21. SEMANTIC SURFACE / TEXT (Phase 5-A 追加 — ダークモード切替用)
        tokens-dark.css で上書きされるセマンティックレイヤー。
        ライト時は従来トークンに寄せてあるので既存コードは無改変で動く。
     ========================================================== */
  --ds-sem-bg:            var(--ds-surface-alt);
  --ds-sem-surface:       var(--ds-surface);
  --ds-sem-surface-raised: var(--ds-surface-card);
  --ds-sem-text:          var(--ds-text);
  --ds-sem-text-sub:      var(--ds-text-sub);
  --ds-sem-text-muted:    var(--ds-text-muted);
  --ds-sem-border:        var(--ds-border);
  --ds-sem-border-strong: var(--ds-border-strong);
}


/* ============================================================
   BASE RESET (.ds スコープのみ — 既存WordPressスタイルを壊さない)
   ============================================================ */
.ds *,
.ds *::before,
.ds *::after {
  box-sizing: border-box;
}

.ds {
  font-family: var(--ds-font-jp);
  font-size: var(--ds-text-body);
  font-weight: var(--ds-fw-regular);
  line-height: var(--ds-lh-body);
  color: var(--ds-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.ds img,
.ds picture,
.ds video,
.ds svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.ds a {
  color: var(--ds-text-link);
  text-decoration: none;
  transition: color var(--ds-dur) var(--ds-ease);
}

.ds a:hover {
  color: var(--ds-text-link-hover);
}

.ds a:focus-visible,
.ds button:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--ds-radius-sm);
}

.ds h1, .ds h2, .ds h3, .ds h4, .ds h5, .ds h6 {
  font-family: var(--ds-font-jp);
  font-weight: var(--ds-fw-black);
  line-height: var(--ds-lh-heading);
  letter-spacing: var(--ds-ls-tight);
  color: var(--ds-text);
  margin: 0;
}

.ds h1 { font-size: var(--ds-text-h1); line-height: var(--ds-lh-tight); }
.ds h2 { font-size: var(--ds-text-h2); }
.ds h3 { font-size: var(--ds-text-h3); font-weight: var(--ds-fw-bold); }
.ds h4 { font-size: var(--ds-text-h4); font-weight: var(--ds-fw-bold); }

.ds p { margin: 0; }

.ds .ds-display {
  font-size: var(--ds-text-display);
  font-weight: var(--ds-fw-black);
  line-height: var(--ds-lh-tight);
  letter-spacing: var(--ds-ls-tight);
}

/* 数字専用（Inter tabular-nums で金融表記安定） */
.ds .ds-num {
  font-family: var(--ds-font-en);
  font-weight: var(--ds-fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ============================================================
   CONTAINER UTILITY
   ============================================================ */
.ds-container {
  width: 100%;
  max-width: var(--ds-container);
  margin-inline: auto;
  padding-inline: var(--ds-container-px);
}

.ds-container-lg {
  max-width: var(--ds-container-lg);
}

@media (max-width: 640px) {
  .ds-container,
  .ds-container-lg {
    padding-inline: var(--ds-container-px-sm);
  }
}

/* ============================================================
   SECTION UTILITY
   ============================================================ */
.ds-section {
  padding-block: var(--ds-section-y);
}

.ds-section-lg {
  padding-block: var(--ds-section-y-lg);
}

/* ============================================================
   TEXT UTILITIES
   ============================================================ */
.ds-text-sub    { color: var(--ds-text-sub); }
.ds-text-muted  { color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
.ds-text-center { text-align: center; }
.ds-text-en     { font-family: var(--ds-font-en); letter-spacing: var(--ds-ls-wide); }
.ds-accent      { color: var(--ds-primary-dark); }
.ds-marker      { background: linear-gradient(transparent 60%, #FFE9D4 60%); padding: 0 2px; }

/* ============================================================
   BUTTON (最小セット、Phase 2 で本格拡張)
   ============================================================ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: 14px 32px;
  font-family: var(--ds-font-jp);
  font-size: var(--ds-text-body);
  font-weight: var(--ds-fw-bold);
  line-height: 1;
  text-align: center;
  border: 0;
  border-radius: var(--ds-radius-pill);
  cursor: pointer;
  transition: all var(--ds-dur) var(--ds-ease);
  white-space: nowrap;
  text-decoration: none;
}

.ds-btn-primary {
  background: var(--ds-primary);
  color: var(--ds-text-on-primary);
  box-shadow: var(--ds-shadow-sm);
}

.ds-btn-primary:hover {
  background: var(--ds-primary-dark);
  color: var(--ds-text-on-primary);
  transform: translateY(-2px);
  box-shadow: var(--ds-glow-primary);
}

.ds-btn-ghost {
  background: transparent;
  color: var(--ds-text);
  border: 1.5px solid var(--ds-border-strong);
}

.ds-btn-ghost:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary-dark);
}

.ds-btn-dark {
  background: var(--ds-dark);
  color: var(--ds-text-inverse);
}

.ds-btn-dark:hover {
  background: var(--ds-dark-deep);
  color: var(--ds-text-inverse);
}

.ds-btn-sm  { padding: 10px 20px; font-size: var(--ds-text-sm); }
.ds-btn-lg  { padding: 18px 40px; font-size: var(--ds-text-h4); }

/* ============================================================
   PRINT / REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ds *,
  .ds *::before,
  .ds *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Phase 5-A.6 VISUAL BOOST (2026-04-24)
   地味→金融格×3D丸みハイブリッドへ底上げ。既存値は一切変更せず追加のみ
   ============================================================ */
:root {
  /* ----------------------------------------------------------
     A. SHADOW 強化層 (opacity 18-22%、浮き感・立体感)
     ---------------------------------------------------------- */
  --ds-shadow-pop:     0 8px 32px rgba(14, 10, 6, .18);
  --ds-shadow-float:   0 20px 60px -12px rgba(14, 10, 6, .22);
  --ds-shadow-card-3d: 0 2px 4px rgba(14,10,6,.08), 0 12px 28px -6px rgba(14,10,6,.20);
  --ds-shadow-glass:
    0 1px 0 0 rgba(255,255,255,.40) inset,
    0 -1px 0 0 rgba(255,255,255,.04) inset,
    0 12px 40px -8px rgba(14, 10, 6, .22);
  --ds-shadow-inset-glow: inset 0 1px 0 rgba(255,255,255,.08);

  /* ----------------------------------------------------------
     B. GLOW 多色化 (発光・光源演出)
     ---------------------------------------------------------- */
  --ds-glow-primary-strong: 0 0 36px rgba(255, 122, 61, .55),
                            0 0 12px rgba(255, 122, 61, .35);
  --ds-glow-gold:     0 0 32px rgba(255, 215, 0, .45);
  --ds-glow-teal:     0 0 32px rgba(8, 145, 178, .45);
  --ds-glow-indigo:   0 0 32px rgba(30, 64, 175, .45);
  --ds-glow-white:    0 0 24px rgba(255, 255, 255, .35);

  /* ----------------------------------------------------------
     C. 金融格アクセント色 (証券会社寄せ)
     ---------------------------------------------------------- */
  --ds-accent-indigo:      #1E40AF;   /* 深紺 - 信頼・金融 */
  --ds-accent-indigo-bg:   #EEF2FF;
  --ds-accent-teal:        #0891B2;   /* ティール - データ・分析 */
  --ds-accent-teal-bg:     #ECFEFF;
  --ds-accent-navy:        #0F172A;   /* ネイビー - 重厚ヒーロー */
  --ds-risk-deep-red:      #7F1D1D;   /* リスク警告 */
  --ds-risk-deep-red-bg:   #FEF2F2;
  --ds-accent-mint:        #14B8A6;   /* 新鮮・成長指標 */

  /* 金融格用リニアグラデーション */
  --ds-gradient-hero-dark:
    linear-gradient(135deg, #0F172A 0%, #1E1810 55%, #2A1C10 100%);
  --ds-gradient-primary-glow:
    linear-gradient(135deg, #FF7A3D 0%, #FF5100 60%, #E8420A 100%);
  --ds-gradient-gold-primary:
    linear-gradient(135deg, #FFD700 0%, #FF9A3D 50%, #FF5100 100%);

  /* ----------------------------------------------------------
     D. TYPOGRAPHY 強化 (視覚ウェイト大型化)
     ---------------------------------------------------------- */
  --ds-text-hero:    clamp(3rem,   7vw, 5.5rem);  /* 48-88px */
  --ds-text-stat:    clamp(3.5rem, 8vw, 6rem);    /* 56-96px */
  --ds-text-lead:    clamp(1.125rem, 2vw, 1.375rem); /* 18-22px サブコピー */

  --ds-text-shadow-hero:
    0 2px 8px rgba(0,0,0,.35),
    0 1px 2px rgba(0,0,0,.55);
  --ds-text-shadow-soft: 0 1px 2px rgba(0,0,0,.20);

  /* background-clip:text で em に適用するグラデテキスト */
  --ds-text-gradient-primary:
    linear-gradient(92deg, #FFB387 0%, #FF7A3D 35%, #FFD700 100%);
  --ds-text-gradient-gold:
    linear-gradient(92deg, #FFE066 0%, #FFD700 45%, #FFA500 100%);

  /* ----------------------------------------------------------
     E. 背景パターン (CSS だけで閉じる装飾)
     ---------------------------------------------------------- */
  --ds-bg-dots:
    radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1.5px);
  --ds-bg-dots-dark:
    radial-gradient(circle, rgba(14,10,6,.10) 1px, transparent 1.5px);
  --ds-bg-dots-size: 20px 20px;

  --ds-bg-grid:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  --ds-bg-grid-dark:
    linear-gradient(rgba(14,10,6,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,10,6,.06) 1px, transparent 1px);
  --ds-bg-grid-size: 40px 40px;

  /* メッシュ (柔らかいラジアル多点) */
  --ds-bg-mesh-soft:
    radial-gradient(at 12% 18%, rgba(255,122,61,.22) 0px, transparent 45%),
    radial-gradient(at 82% 10%, rgba(30,64,175,.18) 0px, transparent 50%),
    radial-gradient(at 65% 88%, rgba(255,215,0,.14) 0px, transparent 48%),
    radial-gradient(at 15% 85%, rgba(8,145,178,.18) 0px, transparent 52%);

  /* ノイズ (SVG data URI / 超軽量) */
  --ds-bg-noise:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* Blob (SVG data URI / tokensに内包する小ブロブ) */
  --ds-bg-blob-primary:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><path fill='%23FF7A3D' fill-opacity='0.55' d='M421,308Q414,376,353,416Q292,456,226,425Q160,394,132,327Q104,260,144,199Q184,138,249,110Q314,82,375,124Q436,166,441,233Q446,240,421,308Z'/></svg>");
  --ds-bg-blob-teal:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><path fill='%230891B2' fill-opacity='0.45' d='M436,328Q421,406,350,428Q279,450,212,417Q145,384,118,316Q91,248,138,197Q185,146,252,128Q319,110,387,145Q455,180,454,250Q453,320,436,328Z'/></svg>");
  --ds-bg-blob-gold:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><path fill='%23FFD700' fill-opacity='0.35' d='M415,305Q402,370,347,408Q292,446,229,420Q166,394,139,332Q112,270,149,211Q186,152,249,129Q312,106,369,144Q426,182,430,241Q434,240,415,305Z'/></svg>");

  /* ----------------------------------------------------------
     F. BACKDROP / FILTER トークン (Glass / Glow)
     ---------------------------------------------------------- */
  --ds-backdrop-blur:      blur(16px);
  --ds-backdrop-blur-lg:   blur(24px);
  --ds-backdrop-saturate:  saturate(1.4);
  --ds-glass-bg:           rgba(255,255,255,.08);
  --ds-glass-bg-strong:    rgba(255,255,255,.14);
  --ds-glass-border:       rgba(255,255,255,.18);

  /* ----------------------------------------------------------
     G. MASCOT (トレまる) 用トークン
     ---------------------------------------------------------- */
  --ds-mascot-glow:        drop-shadow(0 0 24px rgba(255,122,61,.45))
                           drop-shadow(0 8px 16px rgba(14,10,6,.30));
  --ds-mascot-float-time:  6s;

  /* ----------------------------------------------------------
     H. TYPOGRAPHY ALIASES
     ---------------------------------------------------------- */
  --ds-text-lg:    1.125rem;            /* lead / intro テキスト（--ds-text-h4 と同値だが意味が異なる） */
  --ds-lh-relaxed: 1.6;                 /* lh-body(1.75) と lh-heading(1.4) の中間 */
  --ds-font-body:  var(--ds-font-jp);   /* body フォント alias（将来のフォント切替 hook 点） */

  /* ----------------------------------------------------------
     I. COMPONENT DEFAULTS
     ---------------------------------------------------------- */
  --ds-ea-accent:  var(--ds-primary);   /* ea-card の per-element override 用グローバルデフォルト */

  /* ----------------------------------------------------------
     J. SHAPE TOKENS — theme layer override targets (Phase 6-B)
     ---------------------------------------------------------- */
  --ds-cta-shape:        var(--ds-radius);        /* ボタン角丸 — theme で上書き */
  --ds-card-shape:       var(--ds-radius-md);     /* カード角丸 — theme で上書き */
  --ds-card-shadow:      var(--ds-shadow-md);     /* カードシャドウ — theme で上書き */
  --ds-hero-density:     clamp(4rem, 10vw, 7rem); /* ヒーロー上下余白 */
  --ds-section-rhythm:   clamp(3rem, 7vw, 5rem);  /* セクション上下余白 */

  /* ----------------------------------------------------------
     K. COMPATIBILITY ALIASES (Phase 6-E 追加)
        components.css で参照される短縮エイリアス。
        実体は既存トークンに委譲する。
     ---------------------------------------------------------- */
  --ds-color-canvas:     var(--ds-surface);        /* 背景色エイリアス */
  --ds-color-on-primary: var(--ds-text-on-primary);/* プライマリ上テキスト */
  --ds-text-base:        var(--ds-text-body);       /* ベーステキストサイズ */
  --ds-color-muted:      var(--ds-text-muted);      /* ミュートカラー */
  --ds-content-max:      var(--ds-container);       /* コンテンツ最大幅 */
  --ds-text-xl:          clamp(1.25rem, 2vw, 1.5rem); /* 特大テキスト (h3 相当) */
}

/* Decor / Visual Hero / Stats Card でしか使わないユーティリティレイヤー */
.ds-u-text-gradient {
  background: var(--ds-text-gradient-primary);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.ds-u-text-gradient--gold {
  background: var(--ds-text-gradient-gold);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.ds-u-glass {
  background: var(--ds-glass-bg);
  backdrop-filter: var(--ds-backdrop-blur) var(--ds-backdrop-saturate);
  -webkit-backdrop-filter: var(--ds-backdrop-blur) var(--ds-backdrop-saturate);
  border: 1px solid var(--ds-glass-border);
  box-shadow: var(--ds-shadow-glass);
}

.ds-u-float {
  animation: ds-float var(--ds-mascot-float-time) ease-in-out infinite;
}

@keyframes ds-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-u-float { animation: none; }
}