/* ──────────────────────────────────────────────────────────
   YoutuView デザイントークン
   方向性: 新聞のテレビ欄 × 和モダン editorial。
   暖かみのある紙の地に、深紅(crimson)を主役、藍(navy)を補助に。
   ────────────────────────────────────────────────────────── */
:root {
  /* サーフェス */
  --paper: #f4efe6;
  --paper-2: #efe8db;
  --surface: #fffdf8;
  --surface-2: #faf5ea;
  --ink: #20262e;
  --ink-soft: #404a56;
  --muted: #6c6659;
  --line: #ddd2bf;
  --line-strong: #c8bba2;

  /* ブランドカラー */
  --crimson: #b42318;
  --crimson-deep: #8e1a11;
  --crimson-soft: #f4e0dc;
  --navy: #1f3f7a;
  --navy-soft: #e2e8f3;
  --gold: #c89a3c;
  --green: #2f6f4e;

  /* タイポグラフィ */
  --font-serif: "Shippori Mincho B1", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-base: 0.95rem;
  --text-lg: 1.12rem;
  --text-xl: 1.4rem;
  --text-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --text-display: clamp(2.2rem, 1.2rem + 4vw, 4rem);

  /* 余白 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* 角丸・影 */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --shadow-sm: 0 1px 3px rgba(40, 30, 20, 0.08);
  --shadow: 0 8px 24px rgba(40, 30, 20, 0.1);
  --shadow-lg: 0 20px 50px rgba(30, 22, 14, 0.18);

  /* モーション */
  --dur-fast: 140ms;
  --dur: 260ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* レイアウト（sticky要素の基準。site-headerの実高と一致させる） */
  --header-h: 65px;

  /* 局アクセント（JSのdataにフォールバック） */
  --accent: var(--crimson);
}

@media (max-width: 640px) {
  :root { --header-h: 51px; }
}

/* ダーク再生ブラウザ用（テレビ本体らしい暗い没入面） */
.theater {
  --paper: #14110d;
  --paper-2: #1b1712;
  --surface: #211c16;
  --surface-2: #2a241c;
  --ink: #f4ede0;
  --ink-soft: #d8cdbb;
  --muted: #a69d8e;
  --line: #3a3127;
  --line-strong: #4c4133;
  --crimson: #e0584b;
  --crimson-soft: #3a201c;
  --navy: #7ba0e0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}