/* ===========================================================
   tokens.css — デザインの意匠はすべてここに集約する。
   他のCSSファイルでは生の色コード / px値を書かないこと。
   デザイン調整はこのファイルの値を書き換えるだけで完結させる。
   （WordPress移行後もこのファイルはそのまま使える）
   =========================================================== */

:root {
  /* --- Color: ベース ------------------------------------- */
  --c-bg: #ffffff;
  --c-bg-alt: #f5f6f8;
  --c-bg-sunken: #eceef2;
  --c-bg-dark: #0d0f14;
  --c-bg-dark-alt: #161a22;
  /* ヒーローのグロー中心付近の紺。CTA帯とフッターに使い、
     最初に目に入る色（黒より紺に見える）とトーンをそろえる。 */
  --c-bg-navy: #121d3d;

  /* --- Color: テキスト ------------------------------------ */
  --c-ink: #0d0f14;
  --c-ink-mute: #656e7d;
  --c-ink-faint: #9aa3b0;
  --c-ink-inverse: #ffffff;
  --c-ink-inverse-mute: #a2abba;

  /* --- Color: アクセント ---------------------------------- */
  --c-accent: #1a4fff;
  --c-accent-hover: #0033e0;
  --c-accent-soft: #e8eeff;
  --c-accent-art: #ff5a3d; /* アート側のサブアクセント */

  /* --- Color: 罫線・面 ------------------------------------ */
  --c-line: #e2e5ea;
  --c-line-strong: #c8cdd6;
  --c-line-inverse: #2a2f3a;

  /* --- Color: フィードのソース種別（お知らせ/note/SNS/導入事例）--
     ソース種別を増やすときはここに1色足すだけでよい。
     （対応する _data/sourceTypes.json / feed.js の sourceType と
     文字列を揃えること）

     色はヒーロー見出しのグラデーション（青紫 → 朱）を5等分した並び。
     デザイン案の指定色をそのまま採っている。

     注意：この明るさだと白文字とのコントラストは 2.3〜3.6 で、
     読みやすさの基準（4.5:1）を満たさない。淡さを優先した判断。 */
  --c-source-all: #8f9cce;
  --c-source-hp-news: #ab94c5;
  --c-source-note: #c988a5;
  --c-source-sns: #e4767a;
  --c-source-case-study: #eb5f4d;

  /* marumado カード端のグラデーション帯の暗色側。
     明色側は上の --c-source-* をそのまま使う。 */
  --c-source-hp-news-deep: #675976;
  --c-source-note-deep: #795263;
  --c-source-sns-deep: #894749;
  --c-source-case-study-deep: #8d392e;

  /* --- Typography ----------------------------------------- */
  --ff-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui,
    sans-serif;
  --ff-en: "Inter", "Noto Sans JP", system-ui, sans-serif;
  --ff-mono: "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  /* 流体タイポ: 画面幅に応じて滑らかに変化させる。
     最小値は 375px 幅で英文見出しが折り返さずに収まる値にしている。 */
  --fs-display: clamp(2rem, 7.4vw, 6rem);
  --fs-h1: clamp(1.75rem, 5vw, 3.75rem);
  --fs-h2: clamp(1.625rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.625rem);
  --fs-h4: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-lead: clamp(1rem, 1.5vw, 1.25rem);
  --fs-body: clamp(0.9375rem, 1.05vw, 1.0625rem);
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-label: 0.6875rem;

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

  --lh-tight: 1.15;
  --lh-heading: 1.35;
  --lh-body: 1.9;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-label: 0.16em;

  /* --- Spacing -------------------------------------------- */
  --sp-2xs: 0.25rem;
  --sp-xs: 0.5rem;
  --sp-sm: 0.75rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4rem;

  /* セクション上下余白・左右ガター（画面幅に追従） */
  --sp-section: clamp(72px, 10vw, 160px);
  --sp-section-sm: clamp(48px, 6vw, 96px);
  --sp-gutter: clamp(20px, 5vw, 48px);

  /* --- Layout --------------------------------------------- */
  --w-container: 1200px;
  --w-container-wide: 1440px;
  --w-prose: 46rem;
  --h-header: 72px;
  --h-header-lg: 88px;

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

  --shadow-sm: 0 1px 2px rgba(13, 15, 20, 0.06);
  --shadow-md: 0 4px 16px rgba(13, 15, 20, 0.08);
  --shadow-lg: 0 16px 48px rgba(13, 15, 20, 0.12);

  /* --- Motion --------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.18s;
  --dur: 0.35s;
  --dur-slow: 0.7s;

  /* --- z-index -------------------------------------------- */
  /* ヘッダーはドロワーより前面に置く（開いている間も閉じるボタンを押せるように） */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 250;
  /* marumado パネル: 通常のオーバーレイより前面、ドロワー/ヘッダーより背面 */
  --z-marumado: 260;
  --z-drawer: 300;
  --z-header: 400;
}

/* 暗い背景のセクションで囲うと、中のテキスト色トークンが反転する。
   .u-invert を付けるだけで内部のコンポーネントが暗色対応になる。 */
.u-invert {
  --c-bg: var(--c-bg-dark);
  --c-bg-alt: var(--c-bg-dark-alt);
  --c-ink: var(--c-ink-inverse);
  --c-ink-mute: var(--c-ink-inverse-mute);
  --c-ink-faint: #6d7686;
  --c-line: var(--c-line-inverse);
  --c-line-strong: #3a414f;

  background-color: var(--c-bg);
  color: var(--c-ink);
}