/* ==========================================================================
   FinanScope Renewal 2026 — Design Tokens
   Source of truth: Figma「FinanScope Renewal 2026」
     - Variables: Primitives / Color / Spacing（コードシンタックス = 下記の変数名）
     - Text styles: renewal/JP/*・renewal/EN/*
     - Color style: FinanScope/Primary/Gradation（グラデーションのみ）
     - Effect styles: Box-Dropshadow / Dropshadow-select / Drop Shadow
   このファイルは Figma の値をそのまま写したものです。手で値を変えず、
   Figma 側を更新 → このファイルを再生成してください。
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Primitives（基本色）— 直接使うのは semantic に該当が無い場合のみ
     ------------------------------------------------------------------------ */
  --color-purple-10: #f1effc;
  --color-purple-100: #ad26ff;
  --color-purple-200: #9226ff;
  --color-purple-300: #6426ff;
  --color-purple-400: #5f2fd4;
  --color-purple-500: #5426c5;

  --color-gray-50: #f1f3f8;
  --color-gray-100: #d5d6dc;
  --color-gray-200: #c2c2c9;
  --color-gray-300: #afaeb6;
  --color-gray-400: #9d9ba3;
  --color-gray-500: #898790;
  --color-gray-600: #76737d;
  --color-gray-700: #635f6a;
  --color-gray-800: #504c57;
  --color-gray-900: #332d39;

  --color-white-1000: #ffffff;
  --color-ink-1000: #0a0310;   /* Figma: black/1000 */
  --color-black-pure: #000000; /* Figma: black/pure */
  --color-red-500: #ff005b;

  --color-gradient-start: #6426f8;
  --color-gradient-end: #a304b7;

  --color-brand-management: #ffb238;
  --color-brand-consulting: #cad35a;

  /* 半透明（Figma: alpha/*） */
  --color-alpha-ink-70: rgb(10 3 16 / 0.7);
  --color-alpha-white-70: rgb(255 255 255 / 0.7);
  --color-alpha-white-50: rgb(255 255 255 / 0.5);
  --color-alpha-gray-100-60: rgb(213 214 220 / 0.6);
  --color-alpha-gray-100-50: rgb(213 214 220 / 0.5);

  /* ------------------------------------------------------------------------
     Semantic（用途別）— 実装では原則こちらを使う
     ------------------------------------------------------------------------ */
  /* Background */
  --color-bg-base: var(--color-white-1000);
  --color-bg-subtle: var(--color-gray-50);
  --color-bg-placeholder: var(--color-gray-100);
  --color-bg-brand: var(--color-purple-300);
  --color-bg-brand-subtle: var(--color-purple-10);
  --color-bg-inverse: var(--color-gray-800);
  --color-bg-brand-management: var(--color-brand-management);
  --color-bg-brand-consulting: var(--color-brand-consulting);

  /* Text */
  --color-text-base: var(--color-ink-1000);
  --color-text-muted: var(--color-gray-500);
  --color-text-placeholder: var(--color-gray-300);
  --color-text-inverse: var(--color-white-1000);
  --color-text-brand: var(--color-purple-300);
  --color-text-brand-management: var(--color-brand-management);
  --color-text-brand-consulting: var(--color-brand-consulting);
  --color-text-danger: var(--color-red-500);

  /* Border */
  --color-border-default: var(--color-gray-100);
  --color-border-strong: var(--color-gray-900);
  --color-border-brand: var(--color-purple-300);
  --color-border-brand-management: var(--color-brand-management);
  --color-border-brand-consulting: var(--color-brand-consulting);

  /* Icon */
  --color-icon-default: var(--color-gray-200);
  --color-icon-strong: var(--color-gray-900);
  --color-icon-inverse: var(--color-white-1000);
  --color-icon-brand: var(--color-purple-300);
  --color-icon-brand-management: var(--color-brand-management);
  --color-icon-brand-consulting: var(--color-brand-consulting);

  /* ------------------------------------------------------------------------
     Gradient（Figma カラースタイル: FinanScope/Primary/Gradation）
     左 → 右。線（stroke）に使う場合は CLAUDE.md の「グラデーション枠線」参照
     ------------------------------------------------------------------------ */
  --gradient-primary: linear-gradient(90deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);

  /* ------------------------------------------------------------------------
     Shadow（Figma エフェクトスタイル）
     ------------------------------------------------------------------------ */
  --shadow-box: 10px 10px 0 0 rgb(0 0 0 / 0.08);     /* Box-Dropshadow（カード等・最頻出） */
  --shadow-select: 0 0 60px 0 rgb(0 0 0 / 0.06);     /* Dropshadow-select（選択・ポップオーバー） */
  --shadow-hard: 10px 10px 0 0 rgb(0 0 0 / 0.25);    /* Drop Shadow */

  /* ------------------------------------------------------------------------
     Spacing / Radius / Layout（Figma: Spacing コレクション）
     ------------------------------------------------------------------------ */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;

  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-full: 9999px;

  --layout-container-max: 1080px;
  --layout-gutter: 24px;
  --layout-article-max: 720px; /* 2026-09-30 Figma の本文カラム幅に合わせて 800→720px（Figma のバリアブル側も要更新） */

  /* ------------------------------------------------------------------------
     Font
     Sofia Pro は Adobe Fonts 等のライセンス配信を想定（読み込み方法は CLAUDE.md）
     ------------------------------------------------------------------------ */
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-en: "sofia-pro", "Sofia Pro", var(--font-jp);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --letter-spacing-base: 1px; /* renewal 系スタイル共通 */

  /* ------------------------------------------------------------------------
     Breakpoints（参考値。CSS変数は @media に使えないため、値を直接書く）
       SP     : 〜1023px            @media (max-width: 1023px)
       Tablet : 1024px〜1339px      @media (min-width: 1024px) and (max-width: 1339px)
       PC     : 1340px〜（デザイン幅 1440px）  @media (min-width: 1340px)
     ------------------------------------------------------------------------ */
}

/* ==========================================================================
   Typography — Figma テキストスタイルと 1 対 1
   命名: renewal/JP/44/Bold → .t-jp-44-bold
         renewal/JP/Label/16/Medium → .t-jp-label-16-medium
         renewal/EN/Heading/32/Bold → .t-en-heading-32-bold
   line-height は「行間px ÷ 文字サイズpx」の比率で指定
   ========================================================================== */

[class^="t-jp-"], [class*=" t-jp-"] { font-family: var(--font-jp); letter-spacing: var(--letter-spacing-base); }
[class^="t-en-"], [class*=" t-en-"] { font-family: var(--font-en); letter-spacing: var(--letter-spacing-base); }

/* ---- JP ---- */
.t-jp-44-regular { font-size: 2.75rem;  line-height: calc(58 / 44); font-weight: var(--font-weight-regular); }
.t-jp-44-bold    { font-size: 2.75rem;  line-height: calc(58 / 44); font-weight: var(--font-weight-bold); }
.t-jp-38-bold    { font-size: 2.375rem; line-height: calc(50 / 38); font-weight: var(--font-weight-bold); }
.t-jp-32-bold    { font-size: 2rem;     line-height: calc(48 / 32); font-weight: var(--font-weight-bold); }
.t-jp-28-bold    { font-size: 1.75rem;  line-height: calc(42 / 28); font-weight: var(--font-weight-bold); }
.t-jp-24-bold    { font-size: 1.5rem;   line-height: calc(36 / 24); font-weight: var(--font-weight-bold); }
.t-jp-20-regular { font-size: 1.25rem;  line-height: calc(32 / 20); font-weight: var(--font-weight-regular); }
.t-jp-20-bold    { font-size: 1.25rem;  line-height: calc(32 / 20); font-weight: var(--font-weight-bold); }
.t-jp-18-regular { font-size: 1.125rem; line-height: calc(32 / 18); font-weight: var(--font-weight-regular); }
.t-jp-18-bold    { font-size: 1.125rem; line-height: calc(32 / 18); font-weight: var(--font-weight-bold); }
.t-jp-16-regular { font-size: 1rem;     line-height: calc(28 / 16); font-weight: var(--font-weight-regular); }
.t-jp-16-bold    { font-size: 1rem;     line-height: calc(28 / 16); font-weight: var(--font-weight-bold); }
.t-jp-14-regular { font-size: 0.875rem; line-height: calc(24 / 14); font-weight: var(--font-weight-regular); }
.t-jp-14-bold    { font-size: 0.875rem; line-height: calc(24 / 14); font-weight: var(--font-weight-bold); }
.t-jp-12-regular { font-size: 0.75rem;  line-height: calc(22 / 12); font-weight: var(--font-weight-regular); }
.t-jp-12-bold    { font-size: 0.75rem;  line-height: calc(22 / 12); font-weight: var(--font-weight-bold); }
.t-jp-10-regular { font-size: 0.625rem; line-height: calc(20 / 10); font-weight: var(--font-weight-regular); }
.t-jp-10-bold    { font-size: 0.625rem; line-height: calc(20 / 10); font-weight: var(--font-weight-bold); }

.t-jp-caption-12-regular { font-size: 0.75rem; line-height: calc(24 / 12); font-weight: var(--font-weight-regular); }

.t-jp-label-20-regular { font-size: 1.25rem;  line-height: calc(32 / 20); font-weight: var(--font-weight-regular); }
.t-jp-label-20-bold    { font-size: 1.25rem;  line-height: calc(32 / 20); font-weight: var(--font-weight-bold); }
.t-jp-label-18-regular { font-size: 1.125rem; line-height: calc(30 / 18); font-weight: var(--font-weight-regular); }
.t-jp-label-18-bold    { font-size: 1.125rem; line-height: calc(30 / 18); font-weight: var(--font-weight-bold); }
.t-jp-label-16-medium  { font-size: 1rem;     line-height: calc(24 / 16); font-weight: var(--font-weight-medium); }
.t-jp-label-16-bold    { font-size: 1rem;     line-height: calc(24 / 16); font-weight: var(--font-weight-bold); }
.t-jp-label-14-medium  { font-size: 0.875rem; line-height: calc(20 / 14); font-weight: var(--font-weight-medium); }
.t-jp-label-14-bold    { font-size: 0.875rem; line-height: calc(20 / 14); font-weight: var(--font-weight-bold); }

/* ---- EN (Sofia Pro) ---- */
.t-en-heading-56-regular { font-size: 3.5rem;   line-height: calc(58 / 56); font-weight: var(--font-weight-regular); }
.t-en-heading-44-regular { font-size: 2.75rem;  line-height: calc(58 / 44); font-weight: var(--font-weight-regular); }
.t-en-heading-44-bold    { font-size: 2.75rem;  line-height: calc(58 / 44); font-weight: var(--font-weight-bold); }
.t-en-heading-32-regular { font-size: 2rem;     line-height: calc(48 / 32); font-weight: var(--font-weight-regular); }
.t-en-heading-32-bold    { font-size: 2rem;     line-height: calc(48 / 32); font-weight: var(--font-weight-bold); }
.t-en-heading-28-regular { font-size: 1.75rem;  line-height: calc(42 / 28); font-weight: var(--font-weight-regular); }
.t-en-heading-28-bold    { font-size: 1.75rem;  line-height: calc(42 / 28); font-weight: var(--font-weight-bold); }
.t-en-heading-24-regular { font-size: 1.5rem;   line-height: calc(36 / 24); font-weight: var(--font-weight-regular); }
.t-en-heading-24-bold    { font-size: 1.5rem;   line-height: calc(36 / 24); font-weight: var(--font-weight-bold); }
.t-en-body-16-regular    { font-size: 1rem;     line-height: calc(28 / 16); font-weight: var(--font-weight-regular); }
.t-en-body-16-bold       { font-size: 1rem;     line-height: calc(28 / 16); font-weight: var(--font-weight-bold); }
.t-en-label-16-bold      { font-size: 1rem;     line-height: calc(24 / 16); font-weight: var(--font-weight-bold); }
.t-en-label-14-regular   { font-size: 0.875rem; line-height: calc(20 / 14); font-weight: var(--font-weight-regular); }
.t-en-label-14-bold      { font-size: 0.875rem; line-height: calc(20 / 14); font-weight: var(--font-weight-bold); }
.t-en-caption-12-regular { font-size: 0.75rem;  line-height: calc(18 / 12); font-weight: var(--font-weight-regular); }
.t-en-caption-12-bold    { font-size: 0.75rem;  line-height: 1;             font-weight: var(--font-weight-bold); }
.t-en-number-220-bold    { font-size: 13.75rem; line-height: calc(182 / 220); font-weight: var(--font-weight-bold); }
.t-en-number-180-bold    { font-size: 11.25rem; line-height: calc(150 / 180); font-weight: var(--font-weight-bold); }