/* ============================================================
   GRAY EC テーマ設定（UIカスタマイズはこのファイルを編集）
   色・フォント・角丸・余白などの「見た目の素」をまとめています。
   値を変えるだけでサイト全体の印象を変えられます。
   ============================================================ */
:root {
  /* --- 配色（元デザインのグレースケール基調） --- */
  --c-bg:          #161819;  /* 背景（最暗） */
  --c-bg-2:        #1a1c1d;  /* 背景（やや明） */
  --c-surface:     #26292b;  /* カード・面 */
  --c-surface-2:   #2e3134;  /* 面（ホバー等） */
  --c-line:        #34383b;  /* 罫線 */
  --c-text:        #eef0f1;  /* 文字（主） */
  --c-text-2:      #aab0b5;  /* 文字（副） */
  --c-muted:       #8a9196;  /* 文字（薄） */
  --c-accent:      #8ea2ae;  /* アクセント（青みグレー） */
  --c-accent-ink:  #161819;  /* アクセント上の文字 */
  --c-danger:      #d98c8c;

  /* --- フォント --- */
  --font-display: 'Newsreader', 'Shippori Mincho', serif;       /* 見出し（英） */
  --font-serif-ja:'Shippori Mincho', serif;                     /* 和文セリフ */
  --font-sans:    'Zen Kaku Gothic New', -apple-system, sans-serif; /* 本文 */
  --font-mono:    'Space Mono', ui-monospace, monospace;        /* ラベル・数値 */

  /* --- 角丸 --- */
  --radius-pill: 40px;
  --radius-card: 16px;
  --radius-sm:   10px;

  /* --- 余白・レイアウト --- */
  --maxw: 1200px;
  --gap:  24px;
  --pad-section: 88px;

  /* --- その他 --- */
  --shadow: 0 10px 40px rgba(0,0,0,0.35);
  --transition: 180ms ease;
}

/* 明るいテーマにしたい場合の例（body に class="theme-light" を付ける）
   .theme-light { --c-bg:#faf9f5; --c-bg-2:#fff; --c-surface:#fff; --c-line:#e6e3da;
                  --c-text:#1a1c1d; --c-text-2:#4a4f53; --c-muted:#8a9196; } */