/* ============================================================
   tokens.css  —  MEIDEN CONNECT Design System
   すべての値はここから引く（色・フォント・余白・幅・影・モーション）
   ============================================================ */
@layer tokens {
:root {

  /* --- ブランドカラー ------------------------------------ */
  /* ロゴ／主要CTA専用のグラデ（現行の明るい青緑を維持） */
  --c-brand-grad: linear-gradient(100deg, #13a0df 0%, #3fb188 50%, #71c327 100%);

  /* UI用 青スケール 9段階（彩度を少し抑えた落ち着いた青） */
  --c-brand-900: #0a4d73; /* 濃い：強調・ホバー */
  --c-brand-800: #0f6ea6; /* メイン */
  --c-brand-700: #1a80ba; /* ホバー・やや明るめ */
  --c-brand-600: #3d95c6;
  --c-brand-500: #64abd2;
  --c-brand-400: #8cc1de;
  --c-brand-200: #c2dcea; /* 帯・アウトライン */
  --c-brand-100: #dfecf4; /* 薄い背景 */
  --c-brand-50:  #eff5fa;

  /* GX（グリーン）サブアクセント */
  --c-accent-green:       #4f8a12;
  --c-accent-green-hover: #3f6f0e;

  /* --- 役割名エイリアス（実装ではこちらを参照する） ------ */
  --c-action-primary:       var(--c-brand-800);
  --c-action-primary-hover: var(--c-brand-900);
  --c-accent:               var(--c-brand-800); /* 見出しアクセント・アイコン */
  --c-surface-emphasis:     var(--c-brand-50);

  /* --- テキスト ------------------------------------------ */
  --c-text:        #0f1b2a;
  --c-text-muted:  #3a4a5c;
  --c-text-subtle: #6b7684;
  --c-text-invert: #ffffff;

  /* --- 背景・罫線 ---------------------------------------- */
  --c-bg:      #ffffff;
  --c-bg-alt:  #f5f8fb;
  --c-line:    #e2e7ec;
  --c-line-soft: #eef1f4;

  /* --- フォント ------------------------------------------ */
  --ff-sans: 'Noto Sans JP', sans-serif;         /* 見出し・本文 共通 */
  --ff-num:  'Outfit', 'Noto Sans JP', sans-serif; /* 数字・英字ラベル */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* --- フォントサイズ（本文17px基準・極小は持たない） --- */
  --fs-display: clamp(2.125rem, 1.6vw + 1.7rem, 2.875rem); /* 34-46px ヒーロー */
  --fs-h1:      clamp(1.875rem, 1.0vw + 1.6rem, 2.25rem);  /* 30-36px */
  --fs-h2:      clamp(1.25rem, 0.45vw + 1.1rem, 1.375rem); /* 20-22px */
  --fs-h3:      1.25rem;    /* 20px */
  --fs-h4:      1.0625rem;  /* 17px */
  --fs-body:    1.125rem;   /* 18px（本文基準・最小） */
  --fs-lead:    1.125rem;   /* 18px */
  --fs-small:   1rem;       /* 16px */
  --fs-caption: 1rem;      /* 16px */
  --fs-eyebrow: 0.75rem;    /* 12px（英字ラベル・番号のみ） */

  /* --- 行間・字間（日本語向け） -------------------------- */
  --lh-tight:   1.3;
  --lh-heading: 1.5;
  --lh-body:    1.7;
  --lh-loose:   1.7;

  --tr-heading: 0;        /* 日本語見出しは詰めない */
  --tr-body:    0;
  --tr-wide:    0.08em;
  --tr-eyebrow: 0.14em;   /* 英字ラベル・番号 */

  /* --- 余白：8px基準 10段階 ------------------------------ */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --section-py:       clamp(2.25rem, 5vw, 4rem);
  --section-py-tight: clamp(1.5rem, 3vw, 2.5rem);
  --section-py-loose: clamp(3rem, 7vw, 5.5rem);

  /* 見出し左の縦線バーと本文の間隔（固定px＝全ページ・全フォントサイズで一定） */
  --sec-bar-gap: 22px;

  /* --- コンテナ幅 ---------------------------------------- */
  --container-max:    1120px; /* 標準 */
  --container-narrow:  880px; /* 詰めるセクション */
  --container-read:    760px; /* 長文本文（kyoso ナラティブ） */
  --container-pad:     clamp(1rem, 3vw, 2rem);

  /* --- Radius / Shadow / Motion / Icon ------------------- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(20,30,50,.04);
  --sh-md: 0 4px 16px rgba(20,30,50,.06);
  --sh-lg: 0 12px 32px rgba(20,30,50,.08);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur:  200ms;

  --icon-sm: 1rem;   --icon-md: 1.25rem;
  --icon-lg: 1.5rem; --icon-xl: 2rem;
  --icon-stroke: 1.75;
}
}