/* ============================================================
   デザインG (Design G) Design System — Tokens
   深いネイビー・墨黒・アイボリーを基調とした、静かで余白のある大人向けのデザイン。
   見出しは上品な明朝体、本文は読みやすいゴシック体。
   夜・月・窓辺・手紙・古い写真を想起させる、彩度を抑えたトーン。
   ============================================================ */

/* ---------- Webfonts (Google Fonts CDN) ----------
   Shippori Mincho      : 見出し・明朝（上品で静か）
   Zen Kaku Gothic New  : 本文・ゴシック（読みやすい和文 + UI）
   Cormorant            : 欧文ディスプレイ・数字アクセント
   ----------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&family=Cormorant:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ============================================================
     COLOR — Ivory (アイボリー) — primary light surfaces, "letter paper"
     ============================================================ */
  --ivory-50:  #faf7ef;
  --ivory-100: #f5f0e3;  /* base page background (light) */
  --ivory-200: #ece5d4;
  --ivory-300: #ddd4bd;  /* hairline borders on light */
  --ivory-400: #c8bd9f;

  /* ---- Ink black (墨黒) — warm-cool sumi text & deepest ground ---- */
  --ink-900: #16181d;    /* primary text on light */
  --ink-800: #20242c;
  --ink-700: #353a44;
  --ink-600: #4d535f;
  --ink-500: #6b7280;    /* muted / secondary text */
  --ink-400: #8c93a0;    /* placeholder, disabled */

  /* ---- Navy (深いネイビー) — brand & night surfaces ---- */
  --navy-900: #11182a;   /* deepest night ground */
  --navy-800: #16203a;   /* primary dark surface */
  --navy-700: #1d2b4a;   /* raised dark surface */
  --navy-600: #273a5e;
  --navy-500: #364e78;   /* navy accents on light */
  --navy-400: #5a7099;

  /* ---- Moonlight (月光) — muted brass accent + pale moon ---- */
  --brass-600: #9c8550;  /* moonlight brass, deep */
  --brass-500: #b8a06a;  /* primary accent — restrained gold */
  --brass-400: #cdb988;
  --moon-200:  #e6e0cd;  /* pale moon glow */
  --moon-100:  #f1ecdd;

  /* ---- Quiet semantic hues (彩度控えめ) ---- */
  --moss-500:  #6f7d5f;  /* success / calm */
  --amber-500: #b08a4a;  /* notice */
  --brick-500: #9e5a52;  /* alert / caution (faded vermillion) */
  --dusk-500:  #6a6f8a;  /* info / dusk blue */

  /* ============================================================
     COLOR — Semantic aliases (LIGHT: ivory ground, ink text)
     ============================================================ */
  --surface-canvas:      var(--ivory-100);
  --surface-sunken:      var(--ivory-200);
  --surface-card:        var(--ivory-50);
  --surface-raised:      #ffffff;
  --surface-inset:       var(--ivory-200);
  --surface-inverse:     var(--navy-900);
  --surface-inverse-2:   var(--navy-800);
  --surface-accent:      var(--brass-500);
  --surface-accent-soft: var(--moon-200);

  --text-primary:       var(--ink-900);
  --text-secondary:     var(--ink-800);
  --text-muted:         var(--ink-500);
  --text-faint:         var(--ink-400);
  --text-inverse:       var(--ivory-100);
  --text-inverse-muted: #9aa1b5;
  --text-accent:        var(--brass-600);
  --text-on-accent:     var(--ink-900);

  --border-subtle:  var(--ivory-300);
  --border-default: var(--ivory-300);
  --border-strong:  var(--ivory-400);
  --border-inverse: rgba(230, 224, 205, 0.14);
  --border-accent:  var(--brass-500);
  --border-focus:   var(--navy-500);

  --accent:        var(--brass-500);
  --accent-hover:  var(--brass-600);
  --accent-press:  var(--brass-600);
  --accent-soft:   var(--moon-200);
  --brand:         var(--navy-800);
  --brand-strong:  var(--navy-900);
  --focus-ring:    rgba(54, 78, 120, 0.32);

  /* ---- Status (muted; brass is the only loud accent) ---- */
  --success: var(--moss-500);
  --notice:  var(--amber-500);
  --warning: var(--amber-500);
  --danger:  var(--brick-500);
  --info:    var(--dusk-500);

  --selection-bg: var(--moon-200);

  /* ============================================================
     TYPE — Families
     ============================================================ */
  --font-serif:   'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;   /* 見出し・明朝 */
  --font-sans:    'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif; /* 本文・ゴシック */
  --font-display: var(--font-serif);  /* alias: 見出しは明朝 */
  --font-latin:   'Cormorant', Georgia, serif;  /* 欧文ディスプレイ・数字 */
  --font-mono:    'SFMono-Regular', 'SF Mono', Menlo, Consolas, ui-monospace, monospace;

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Type scale (px) — quiet, generous ---- */
  --text-micro: 11px;
  --text-2xs:   11px;
  --text-xs:    13px;
  --text-sm:    14px;
  --text-md:    15px;
  --text-lg:    17px;
  --text-xl:    22px;
  --text-2xl:   27px;
  --text-3xl:   34px;
  --text-4xl:   44px;
  --text-5xl:   56px;
  --text-6xl:   72px;

  /* ---- Line heights — ゆったり、余白を活かす ---- */
  --leading-tight:   1.32;  /* 明朝見出し */
  --leading-snug:    1.5;
  --leading-normal:  1.7;
  --leading-relaxed: 1.9;   /* 和文本文 */

  /* ---- Letter spacing — 和文は少し開く ---- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0.01em;
  --tracking-wide:   0.06em;   /* 見出し明朝 */
  --tracking-wider:  0.12em;
  --tracking-label:  0.18em;   /* ラベル・スペースド大文字 */
  --tracking-caps:   0.18em;

  /* ============================================================
     SPACING — 8px base grid（余白を大切に）
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --gutter:          24px;
  --page-pad:        clamp(20px, 5vw, 80px);
  --container-max:   1120px;
  --container-prose: 680px;
  --section-y:       var(--space-20);

  /* ---- Touch / control sizing ---- */
  --control-h-sm: 36px;
  --control-h:    44px;
  --control-h-lg: 52px;

  /* ============================================================
     RADIUS — 控えめな角丸
     ============================================================ */
  --radius-xs:   3px;
  --radius-sm:   6px;   /* inputs, chips */
  --radius-md:   10px;  /* buttons */
  --radius-lg:   14px;  /* cards */
  --radius-xl:   20px;  /* modals, large panels */
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --border-thin: 1px;
  --border-med:  1.5px;

  /* ============================================================
     ELEVATION — soft, low, like dusk light（黒く硬くしない）
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(22, 24, 29, 0.05);
  --shadow-sm: 0 2px 8px rgba(22, 24, 29, 0.06);
  --shadow-md: 0 6px 20px rgba(22, 24, 29, 0.08);
  --shadow-lg: 0 16px 44px rgba(22, 24, 29, 0.12);
  --shadow-xl: 0 24px 60px rgba(22, 24, 29, 0.16);
  --shadow-inset: inset 0 1px 2px rgba(22, 24, 29, 0.06);

  /* シグネチャの月光グロー — 単一のフォーカル要素だけに */
  --shadow-glow: 0 0 0 1px rgba(184, 160, 106, 0.22), 0 8px 40px rgba(184, 160, 106, 0.14);
  --glow-moon:   var(--shadow-glow);

  /* ============================================================
     MOTION — 静かなフェード、バウンスなし
     ============================================================ */
  --ease-quiet:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --ease-emph:   cubic-bezier(0.16, 1, 0.30, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ---- Z layers ---- */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* ============================================================
   NIGHT scope — apply [data-theme="night"] for the navy ground.
   夜の深いネイビー地に、月光ブラスのアクセント。
   ============================================================ */
[data-theme="night"] {
  --surface-canvas:    var(--navy-900);
  --surface-sunken:    #0d1322;
  --surface-card:      var(--navy-800);
  --surface-raised:    var(--navy-700);
  --surface-inset:     #0f1626;

  --text-primary:       var(--ivory-100);
  --text-secondary:     #d9d3c4;
  --text-muted:         #9aa1b5;
  --text-faint:         #6c7488;
  --text-inverse:       var(--ink-900);
  --text-inverse-muted: var(--ink-500);
  --text-accent:        var(--brass-400);
  --text-on-accent:     var(--navy-900);

  --border-subtle:  rgba(230, 224, 205, 0.12);
  --border-default: rgba(230, 224, 205, 0.12);
  --border-strong:  rgba(230, 224, 205, 0.22);
  --border-inverse: rgba(230, 224, 205, 0.12);
  --border-focus:   var(--brass-400);

  --accent:        var(--brass-400);
  --accent-hover:  var(--brass-500);
  --accent-press:  var(--brass-500);
  --accent-soft:   rgba(184, 160, 106, 0.18);
  --brand:         var(--ivory-100);
  --brand-strong:  #ffffff;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 26px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.52);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.40);

  --selection-bg: rgba(184, 160, 106, 0.30);
}

/* ============================================================
   SEMANTIC TYPE — drop-in helper classes (ds- prefix)
   見出しは明朝、本文はゴシック。余白とトラッキングで静けさを作る。
   ============================================================ */
.ds-display {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
  font-feature-settings: "palt" 1;
  text-wrap: balance;
}
.ds-h1 {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
  font-feature-settings: "palt" 1;
  text-wrap: balance;
}
.ds-h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
  font-feature-settings: "palt" 1;
}
.ds-h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}
.ds-eyebrow {
  display: inline-block;
  font-family: var(--font-latin);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
}
.ds-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  text-wrap: pretty;
}
.ds-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  text-wrap: pretty;
}
.ds-caption {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}
.ds-latin {
  font-family: var(--font-latin);
  font-weight: var(--weight-regular);
  font-style: italic;
  color: var(--text-accent);
}
.ds-mono {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ---- Signature accents ---- */
.ds-glow { box-shadow: var(--shadow-glow); }
.ds-rule { border: 0; height: 1px; background: var(--border-strong); margin: 0; }
.ds-rule--accent {
  border: 0; height: 1px; margin: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
/* 淡い月光のドット — 夜のダーク面に控えめに */
.ds-lattice {
  background-image: radial-gradient(rgba(230, 224, 205, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
}