/* ==========================================================================
   variables.css — やまなし DX Navi デザイントークン
   design-system.md v1.1 準拠
   ========================================================================== */

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

:root {
  /* ------------------------------------------------------------------
     カラーパレット
  ------------------------------------------------------------------ */

  /* ベースカラー */
  --color-bg:            #FAFAFA;
  --color-surface:       #FFFFFF;
  --color-border:        #E8E8E8;

  /* テキスト */
  --color-text-primary:   #1A1A1A;
  --color-text-secondary: #6B6B6B;
  --color-text-muted:     #9E9E9E;

  /* アクセントカラー */
  --color-accent:         #2563EB;
  --color-accent-hover:   #1D4ED8;
  --color-accent-light:   #EFF6FF;

  /* ダークセクション用 */
  --color-dark-bg:        #0F172A;
  --color-dark-surface:   #1E293B;
  --color-dark-border:    #334155;
  --color-dark-text:      #F1F5F9;
  --color-dark-muted:     #94A3B8;

  /* ------------------------------------------------------------------
     タイポグラフィ
  ------------------------------------------------------------------ */

  --font-sans:  'Noto Sans JP', sans-serif;
  --font-serif: 'Noto Serif JP', serif;

  /* サイズスケール */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* ウェイト */
  --font-light:   300;
  --font-regular: 400;
  --font-medium:  500;
  --font-bold:    700;

  /* 行間 */
  --leading-tight:  1.4;
  --leading-normal: 1.7;
  --leading-loose:  2.0;

  /* 字間 */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.15em;

  /* ------------------------------------------------------------------
     スペーシング
  ------------------------------------------------------------------ */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* セクション余白 */
  --section-py:    var(--space-24);   /* PC: 上下 96px */
  --section-py-sm: var(--space-16);   /* SP: 上下 64px */

  /* コンテナ */
  --container-max:     1100px;
  --container-padding: 0 var(--space-6);

  /* ------------------------------------------------------------------
     ボーダー・シャドウ・角丸
  ------------------------------------------------------------------ */

  /* 角丸 */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* シャドウ */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.10);

  /* トランジション */
  --transition-base: all 0.2s ease;
  --transition-slow: all 0.4s ease;
}