/*
 * ============================================================
 *  見た目の設定（色・フォント・余白・角丸・影・すりガラス・動き）
 *  見た目はこのファイルだけで決まります。style.css には値を直接書きません。
 * ============================================================
 *  変えたいとき:
 *   - 色                → 「色」のブロック
 *   - すりガラスの強さ   → 「すりガラス」のブロック
 *   - 背景のふんわりした色 → 「背景の色だまり」のブロック
 *   - 文字の種類         → index.html の <link data-js="webfont"> と「フォント」のブロック
 *   - 文字の大きさ       → 「文字サイズ」のブロック
 *   - すき間             → 「余白」のブロック
 *   - 角の丸み・影       → 「角丸」「影」のブロック
 *   - 動きの速さ         → 「動き」のブロック
 * ============================================================
 */

/* Webフォント（Inter：英数字 / Noto Sans JP：日本語　どちらも SIL Open Font License 1.1）
   表示を速くするため、読み込みは index.html の <link data-js="webfont"> で行う（ここで @import すると表示が約3秒遅れる）。
   フォントを変えるときは、その <link> の URL と、下の「フォント」ブロックの名前の両方を変える */

:root {
  /* ---------- 色：白い段・薄いグレーの段 ---------- */
  --color-bg: #ffffff;                 /* 白い段 */
  --color-bg-alt: #f5f5f7;             /* ごく薄いグレーの段 */
  --color-surface: #ffffff;            /* カード */
  --color-text: #1d1d1f;               /* 文字（黒に近いグレー） */
  --color-text-muted: #6e6e73;         /* 補足の文字（グレー） */
  --color-divider: #d2d2d7;            /* 区切り線 */

  /* ---------- 色：黒い段 ---------- */
  --color-bg-dark: #000000;
  --color-surface-on-dark: #1d1d1f;    /* 黒い段のタイル */
  --color-text-on-dark: #f5f5f7;
  --color-text-muted-on-dark: #a1a1a6;
  --color-link-on-dark: #2997ff;

  /* ---------- 色：アクセントは青1色（ボタン・リンクだけ） ---------- */
  --color-accent: #0071e3;             /* 塗りのボタン */
  --color-on-accent: #ffffff;
  --color-link: #0066cc;               /* リンク */
  --color-label: #a33f00;              /* 「近日公開」の小さなラベル（背景の色だまりの上でも読める濃さ） */
  --color-focus: #0071e3;              /* キーボード操作時の枠 */

  /* ---------- すりガラス（Liquid Glass の考え方） ----------
     操作する部品（ヘッダー・メニュー・ボタン）だけに使う。
     下に黒い段が来ても文字が読めるよう、白の濃さは 0.78 以上にしている */
  --glass-bg: rgba(255, 255, 255, 0.78);          /* ヘッダー・ボタン */
  --glass-bg-strong: rgba(255, 255, 255, 0.9);    /* メニュー（文字が多い） */
  --glass-blur: blur(20px) saturate(180%);         /* ぼかしの強さ */
  --glass-border: rgba(255, 255, 255, 0.7);        /* ふちの光 */
  --glass-edge: rgba(0, 0, 0, 0.08);               /* ふちの影 */
  --glass-highlight: rgba(255, 255, 255, 0.95);    /* 上側の光の反射 */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
  --glass-sheen: radial-gradient(120% 140% at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 55%);

  /* ---------- 本文の層のすりガラス（カード。「普通の素材」） ---------- */
  --material-bg: rgba(255, 255, 255, 0.72);
  --material-blur: blur(24px) saturate(160%);
  --material-border: rgba(255, 255, 255, 0.8);

  /* ---------- 背景の色だまり（すりガラスの奥に見える、ふんわりした色） ---------- */
  --ambient-1: rgba(0, 113, 227, 0.16);    /* 青 */
  --ambient-2: rgba(255, 92, 138, 0.12);   /* 桃 */
  --ambient-3: rgba(255, 176, 64, 0.14);   /* 橙 */

  /* ---------- 読み込み中の骨組み（スケルトン） ---------- */
  --skeleton-base: #ececf0;
  --skeleton-shine: #f7f7f9;

  /* ---------- 画面のふちのぼかし（ヘッダーの下を通る本文をなじませる） ---------- */
  --edge-fade: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);

  /* ---------- フォント ---------- */
  --font-body: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-heading: var(--font-body);
  --font-number: var(--font-body);

  /* ---------- 文字サイズ ---------- */
  --font-size-xs: 0.75rem;                          /* 12px */
  --font-size-sm: 0.875rem;                         /* 14px */
  --font-size-base: 1.0625rem;                      /* 17px 本文 */
  --font-size-lg: 1.3125rem;                        /* 21px */
  --font-size-xl: 1.75rem;                          /* 28px */
  --font-size-2xl: clamp(1.75rem, 4vw, 2.5rem);     /* 40px */
  --font-size-3xl: clamp(2.25rem, 5.5vw, 3.5rem);   /* 56px 段の見出し */
  --font-size-display: clamp(6rem, 24vw, 15rem);    /* 開催までの日数 */
  --font-size-hero: clamp(2.5rem, 8vw, 5rem);       /* ページの大見出し */
  --font-weight-heading: 600;
  --font-weight-display: 700;
  --line-height-body: 1.47;
  --letter-spacing-heading: -0.015em;

  /* ---------- 余白 ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --section-gap: 120px;
  --section-gap-mobile: 80px;
  --gutter: 22px;
  --gutter-mobile: 16px;
  --content-width: 980px;
  --header-height: 52px;
  --header-inset: 8px;          /* ヘッダーを画面のふちから浮かせる量 */

  /* ---------- 角丸 ---------- */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-glass: 22px;         /* 浮かぶヘッダー・メニュー */
  --radius-pill: 980px;

  /* ---------- 影 ---------- */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.12);

  /* ---------- 動き ---------- */
  --motion-fast: 200ms;
  --motion-medium: 450ms;
  --motion-slow: 800ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);              /* すっと止まる */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);        /* ぽよんと弾む */
}