/* ==========================================================================
   SILAS Design Tokens
   プロジェクト全工程(デザイン/実装/WordPress化)で共通参照する変数。
   変更はディレクター承認事項。ハードコード禁止。
   ========================================================================== */
:root {
  /* ---- Color ---- */
  --color-ink: #0B1220;        /* 黒(ネイビー寄りの墨) : ダーク背景・主要テキスト */
  --color-navy: #14264A;       /* ネイビー : ダーク面のカード・サブ背景 */
  --color-navy-deep: #0E1B38;  /* ネイビー深 : ダーク面グラデ終点 */
  --color-navy-light: #1E3059; /* ネイビー明 : ダーク面上のUIクローム(モック等) */
  --color-lime: #D1FE00;       /* アクセント : CTA・判断シグナル・強調 */
  /* ライト面の素値(u-dark内でライトUIへ戻す際にも参照) */
  --light-bg: #FFFFFF;
  --light-bg-alt: #F2F4F8;
  --light-line: #DDE3EC;
  --light-text: #1A2233;
  --light-text-weak: #5B6880;

  --color-bg: var(--light-bg);             /* 基本背景 */
  --color-bg-alt: var(--light-bg-alt);     /* セクション背景(ライトグレー) */
  --color-line: var(--light-line);         /* 罫線・カード枠 */
  --color-text: var(--light-text);         /* 本文 */
  --color-text-weak: var(--light-text-weak); /* 補足テキスト */
  --color-text-invert: #F4F7FC;      /* ダーク面の本文 */
  --color-text-invert-weak: #93A0BC; /* ダーク面の補足 */

  /* ---- Typography ---- */
  --font-heading: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en: "Space Grotesk", "Noto Sans JP", sans-serif;

  /* SP基準 + clamp でPCへ流体スケール */
  --fs-hero: clamp(30px, 2.2rem + 2.8vw, 62px);
  --fs-h1: clamp(28px, 1.6rem + 1.6vw, 44px);
  --fs-h2: clamp(24px, 1.35rem + 1.3vw, 38px);
  --fs-h3: clamp(19px, 1.08rem + 0.5vw, 24px);
  --fs-h4: 17px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-note: 12px;
  --fs-num-xl: clamp(56px, 3rem + 5vw, 112px);
  --lh-heading: 1.4;
  --lh-body: 1.9;

  /* ---- Spacing (8px scale) ---- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;
  --sp-6: 96px;
  --sp-7: 128px;
  --section-pad: clamp(64px, 4rem + 4vw, 128px);
  --container: 1240px;
  --container-wide: 1360px;
  --gutter: clamp(20px, 4vw, 40px);

  /* ---- Radius / Shadow ---- */
  --radius-btn: 999px;
  --radius-card: 14px;
  --radius-img: 12px;
  --shadow-card: 0 6px 24px rgba(11, 18, 32, 0.07);
  --shadow-card-hover: 0 14px 40px rgba(11, 18, 32, 0.12);
  --shadow-lime: 0 8px 28px rgba(209, 254, 0, 0.28);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-base: 0.6s;
  --dur-slow: 1.0s;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-drawer: 200;
  --z-cursor: 1000;
}

/* Breakpoints (メディアクエリ基準値 / CSS変数はMQに使えないため規約として明記)
   SP基準: 〜767px / タブレット: 768px〜 / PC: 1024px〜 / ワイド: 1360px〜 */