/* ================================================================
   Basic Core — デザイントークン（variables.css）
   design.md の定義に完全準拠
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {

  /* ────────────────────────────────────────
     グレースケール
  ──────────────────────────────────────── */
  --np-gray-900: #111111;
  --np-gray-800: #222222;
  --np-gray-700: #333333;
  --np-gray-600: #474747;
  --np-gray-500: #616161;
  --np-gray-400: #808080;
  --np-gray-300: #A3A3A3;
  --np-gray-200: #C7C7C7;
  --np-gray-100: #E6E6E6;
  --np-gray-50:  #F5F5F5;
  --np-blue-600: #2ca7e1;

  /* ────────────────────────────────────────
     Basic Core 差し色
  ──────────────────────────────────────── */
  --color-accent-blue:    #2ca7e1;
  --gradient-text:        linear-gradient(120deg, #111111 0%, #2ca7e1 100%);

  /* ────────────────────────────────────────
     セマンティックカラー — ライトセクション
  ──────────────────────────────────────── */
  --color-bg:              #FFFFFF;
  --color-bg-secondary:    var(--np-gray-50);
  --color-bg-tertiary:     var(--np-gray-100);

  --color-text-primary:    var(--np-gray-900);
  --color-text-secondary:  var(--np-gray-600);
  --color-text-muted:      var(--np-gray-400);

  --color-border:          var(--np-gray-200);
  --color-border-strong:   var(--np-gray-300);

  /* ────────────────────────────────────────
     セマンティックカラー — ダークセクション
  ──────────────────────────────────────── */
  --color-dark-bg:         var(--np-gray-800);
  --color-dark-bg-card:    var(--np-gray-700);
  --color-dark-bg-card-alt:#2A2A2A;

  --color-dark-text:       #F0F0EE;
  --color-dark-text-sub:   var(--np-gray-300);
  --color-dark-text-muted: var(--np-gray-500);

  /* ────────────────────────────────────────
     CTA カラー
  ──────────────────────────────────────── */
  --color-accent:          var(--np-gray-900);
  --color-accent-hover:    var(--np-gray-700);
  --color-cta-dark:        #F0F0EE;
  --color-cta-dark-text:   var(--np-gray-900);

  /* ────────────────────────────────────────
     フォント
  ──────────────────────────────────────── */
  --font-ja:   'Noto Sans JP', -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-en:   'Jost', -apple-system, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, monospace;

  /* ────────────────────────────────────────
     タイポグラフィスケール
  ──────────────────────────────────────── */
  --text-hero: clamp(56px, 8vw, 80px);
  --text-3xl:  clamp(40px, 5vw, 60px);
  --text-2xl:  clamp(32px, 4vw, 46px);
  --text-xl:   clamp(26px, 3.5vw, 40px);
  --text-lg:   clamp(20px, 2.5vw, 24px);
  --text-base: 16px;
  --text-sm:   14px;
  --text-xs:   12px;

  /* ────────────────────────────────────────
     スペーシング
  ──────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ────────────────────────────────────────
     ボーダー・角丸
  ──────────────────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ────────────────────────────────────────
     シャドウ
  ──────────────────────────────────────── */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 48px -8px rgba(0,0,0,.08), 0 10px 25px -5px rgba(0,0,0,.11);

  /* ────────────────────────────────────────
     トランジション
  ──────────────────────────────────────── */
  --ease-np: cubic-bezier(.4, .4, 0, 1);

  --transition-fast: .15s var(--ease-np);
  --transition-base: .3s  var(--ease-np);
  --transition-slow: .4s  var(--ease-np);
  --transition-page: .6s  var(--ease-np);

  /* ────────────────────────────────────────
     ブレークポイント（参照用）
  ──────────────────────────────────────── */
  --bp-mobile: 690px;
  --bp-tablet: 974px;
  --bp-small: 1024px;
}