/* =========================================================
   Dark Cinematic — Design Tokens
   シティヘブンネット自動運用ツール
   ========================================================= */

:root {
  /* ---------- Color: Surface ---------- */
  --c-bg:           #0A0A0A;   /* Primary: オニキス（最背面） */
  --c-surface:      #141418;   /* セクション背景 */
  --c-surface-1:    #1F1F23;   /* Secondary: チャコール（カード等） */
  --c-surface-2:    #2A2A2F;   /* hover / 段差 */
  --c-surface-3:    #353539;   /* 強調された段差 */

  /* ---------- Color: Line / Mute ---------- */
  --c-line:         #2E2E33;   /* 罫線 */
  --c-line-strong:  #3D3D44;   /* 強調罫線 */
  --c-mute:         #6B6B70;   /* 補助テキスト */
  --c-mute-soft:    #8A8A90;   /* placeholder等 */

  /* ---------- Color: Text ---------- */
  --c-text:         #F2F2F2;
  --c-text-dim:     #C4C4C8;
  --c-text-invert:  #0A0A0A;

  /* ---------- Color: Accent (Champagne Gold) ---------- */
  --c-gold:         #C9A961;   /* 主アクセント */
  --c-gold-hi:      #E0C27A;   /* hover時の明側 */
  --c-gold-lo:      #A88840;   /* 押下時の暗側 */
  --c-gold-soft:    rgba(201, 169, 97, 0.12);  /* 背景タグ等 */
  --c-gold-glow:    rgba(201, 169, 97, 0.35);  /* シャドウ用 */

  /* ---------- Color: Semantic ---------- */
  --c-success:      #6BBF7A;
  --c-warning:      #E0A458;
  --c-danger:       #D9534F;
  --c-info:         #6A9FB5;

  --c-success-soft: rgba(107, 191, 122, 0.14);
  --c-warning-soft: rgba(224, 164, 88, 0.14);
  --c-danger-soft:  rgba(217, 83, 79, 0.14);
  --c-info-soft:    rgba(106, 159, 181, 0.14);

  /* ---------- Typography: Family ---------- */
  --f-display:  "Cormorant Garamond", "Shippori Mincho", "Noto Serif JP", serif;
  --f-body:     "IBM Plex Sans", "Noto Sans JP", system-ui, sans-serif;
  --f-jp-serif: "Shippori Mincho", "Noto Serif JP", serif;
  --f-jp:       "Noto Sans JP", "IBM Plex Sans", sans-serif;
  --f-mono:     "IBM Plex Mono", "Menlo", "Consolas", monospace;

  /* ---------- Typography: Size (8px scale) ---------- */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;   /* 管理画面のデフォルト密度 */
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;
  --fs-display: 96px;  /* LP用ヒーロー */

  /* ---------- Typography: Weight / LineHeight / Tracking ---------- */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-base:   1.6;
  --lh-loose:  1.85;

  --tracking-tight: -0.02em;
  --tracking-base:   0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;   /* 全角大文字風キャップ */
  --tracking-widest: 0.24em;   /* セクションラベル */

  /* ---------- Spacing (8px base) ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;

  /* ---------- Layout ---------- */
  --layout-sidebar-w:        248px;
  --layout-sidebar-collapsed: 64px;
  --layout-header-h:          64px;
  --layout-container-max:   1440px;
  --layout-content-pad:       32px;

  /* ---------- Radius ---------- */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ---------- Shadow ---------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --sh-3: 0 8px 24px rgba(0, 0, 0, 0.55);
  --sh-4: 0 20px 60px rgba(0, 0, 0, 0.7);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ハイライト（ダーク背景での疑似ボーダー） */
  --sh-hairline: inset 0 0 0 1px var(--c-line);
  --sh-hairline-strong: inset 0 0 0 1px var(--c-line-strong);

  /* ゴールドのグロー */
  --sh-glow-gold: 0 0 0 1px var(--c-gold), 0 8px 32px var(--c-gold-glow);
  --sh-focus-gold: 0 0 0 3px rgba(201, 169, 97, 0.25);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap:  cubic-bezier(0.4, 0, 0, 1);
  --ease-soft:  cubic-bezier(0.25, 0.1, 0.25, 1);

  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-medium:  320ms;
  --dur-slow:    480ms;

  /* ---------- Z-index ---------- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  500;
  --z-modal:    800;
  --z-toast:    900;
  --z-max:     9999;

  /* ---------- Background Decorations ---------- */
  /* シネマティックなドットグリッド */
  --bg-dots:
    radial-gradient(circle at center,
      rgba(201, 169, 97, 0.05) 1px,
      transparent 1.5px);
  --bg-dots-size: 28px 28px;

  /* シネマティックなビネット */
  --bg-vignette:
    radial-gradient(ellipse at 50% 0%,
      rgba(201, 169, 97, 0.05) 0%,
      transparent 50%),
    radial-gradient(ellipse at 100% 100%,
      rgba(58, 58, 70, 0.4) 0%,
      transparent 60%);
}

/* =========================================================
   状態に依存しない補助クラス（util）
   ========================================================= */

.u-hairline      { box-shadow: var(--sh-hairline); }
.u-mono          { font-family: var(--f-mono); }
.u-display       { font-family: var(--f-display); font-weight: var(--fw-light); letter-spacing: var(--tracking-tight); }
.u-jp-serif      { font-family: var(--f-jp-serif); }
.u-label         { font-size: var(--fs-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--c-mute); font-weight: var(--fw-medium); }
.u-gold          { color: var(--c-gold); }
.u-mute          { color: var(--c-mute); }
.u-text-dim      { color: var(--c-text-dim); }
.u-divider       { height: 1px; background: var(--c-line); border: 0; }
.u-divider-gold  { height: 1px; background: linear-gradient(90deg, transparent, var(--c-gold), transparent); border: 0; }

/* スクリーンリーダー用 */
.u-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}