/* ==========================================================================
   SOUI Works — デザイントークン
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&family=Shippori+Mincho:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* --- カラー：中間色（紙・墨） --- */
  --kinari:        #FAF7F2;
  --kinari-light:  #FFFCF6;
  --kinari-deep:   #F5EFE3;
  --toriinoko:     #F0E9DC;
  --washi:         #E8E1D2;
  --nezumi-light:  #C2BAA8;
  --nezumi:        #8C8678;
  --nezumi-deep:   #5C574B;
  --sumi-light:    #3B362E;
  --sumi:          #1B1A17;

  /* --- カラー：ブランドプライマリ（藍） --- */
  --ai-pale:       #E3E8EE;
  --ai-light:      #4A6685;
  --ai:            #1F3A5F;
  --ai-deep:       #142540;

  /* --- カラー：アクセント（朱）— 控えめに使用 --- */
  --shu-pale:      #F8E0DC;
  --shu-light:     #E07567;
  --shu:           #D14B3D;
  --shu-deep:      #A2362B;

  /* --- カラー：サポート --- */
  --uguisu:        #7A8450;
  --uguisu-pale:   #E5E8D7;
  --kohaku:        #C68A3D;
  --kohaku-pale:   #F4E5CB;

  /* --- セマンティックカラー --- */
  --bg:            var(--kinari);
  --bg-elevated:   var(--kinari-light);
  --bg-sunken:     var(--kinari-deep);
  --surface:       var(--toriinoko);

  --fg:            var(--sumi);
  --fg-secondary:  var(--nezumi-deep);
  --fg-muted:      var(--nezumi);
  --fg-disabled:   var(--nezumi-light);
  --fg-inverse:    var(--kinari);

  --border:        var(--washi);
  --border-strong: rgba(27, 26, 23, 0.16);
  --divider:       #EFE8DA;

  --primary:       var(--ai);
  --primary-hover: var(--ai-deep);
  --primary-fg:    var(--kinari);

  --accent:        var(--shu);
  --accent-hover:  var(--shu-deep);
  --accent-fg:     var(--kinari);

  --success:       var(--uguisu);
  --warning:       var(--kohaku);
  --danger:        var(--shu);

  --focus-ring:    rgba(31, 58, 95, 0.4);

  /* --- タイポグラフィ --- */
  --font-jp:       'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', system-ui, sans-serif;
  --font-display:  'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-en:       'Inter', 'Zen Kaku Gothic New', system-ui, sans-serif;
  --font-logo:     'Archivo', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-default:  var(--font-jp);

  /* タイプスケール（1.2 minor third、ベース16） */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;

  --lh-tight:   1.25;
  --lh-snug:    1.4;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;
  --lh-display: 1.15;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-jp:     0.02em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* --- スペーシング（8pxグリッド） --- */
  --space-0:  0;
  --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;

  /* --- 角丸 --- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* --- 影（暖色系・低コントラスト） --- */
  --shadow-e1: 0 1px 2px rgba(27, 26, 23, 0.04), 0 1px 1px rgba(27, 26, 23, 0.03);
  --shadow-e2: 0 4px 12px rgba(27, 26, 23, 0.06), 0 1px 2px rgba(27, 26, 23, 0.04);
  --shadow-e3: 0 16px 32px rgba(27, 26, 23, 0.08), 0 2px 6px rgba(27, 26, 23, 0.05);

  /* --- モーション --- */
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);

  --dur-fast:    120ms;
  --dur-base:    240ms;
  --dur-slow:    360ms;
  --dur-ambient: 600ms;

  /* --- レイアウト --- */
  --side-padding-mobile:  20px;
  --side-padding-tablet:  40px;
  --side-padding-desktop: 64px;

  --nav-bar-h:    64px;
  --max-readable: 640px;
  --max-wide:     1120px;
}

/* ベーススタイル */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-default);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-jp);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}