/*
 * デザイントークン。値は references/playright/DESIGN.md（v1.15.0）と references/packet/DESIGN.md（v2.6.0）から写した。
 * 部品の CSS は色・余白・角丸・文字の大きさをここの変数だけで書く（生の色を直書きしない）。
 * 足りないトークンは両テーマに足し、出典をコメントに書く。
 * テーマ: ダークだけ（2026-10-12「ライトモードは廃止。この黒いデザインのみで」。端末が明るい表示でも黒）。
 */

:root {
  color-scheme: dark;

  /* --- 色（Playright DESIGN.md、ダークが正本。無彩色 R=G=B） --- */
  --surface: #0A0A0B;            /* surface（Packet: stage） */
  --gap: #050506;
  --stage-bottom: #050506;
  --stage-veil: #05050680;
  --slab-base: #0A0A0BE6;
  --glass-top: #FFFFFF0D;
  --glass-sheen: #FFFFFF08;
  --glass-bottom: #FFFFFF06;
  --glass-hi: #FFFFFF1A;
  --glass-gloss: #FFFFFF26;
  --rim-hi: #FFFFFF2A;
  --rim-lo: #FFFFFF0D;
  --recess: #00000059;
  --surface-panel: #0F0F11;
  --surface-raised: #161618;
  --surface-inset: #09090A;
  --surface-dialog: #151517;
  --control-stroke: #2E2E32;
  --line: #1C1C1F;
  --line-subtle: #151517;
  --text: #F5F5F7;
  --text-muted: #AEAEB2;
  --text-faint: #6E6E73;
  --engraved: #5C5C61;
  --selection: #26262A;
  --selection-fill: #38383C;
  --selection-stroke: #3A3A3E;
  /* 選択（selectionFill）の上の文字は両テーマとも白（Playright: selection = selectionFill + white） */
  --on-selection: #FFFFFF;
  --on-selection-muted: #FFFFFFB3;
  --accent: #F5F5F7;
  --on-accent: #0A0A0B;
  --signal: #FF453A;             /* 再生位置と再生中の表示だけ */
  --success: #30D158;            /* 状態だけ（リンクの有効など） */
  --warning: #FFB340;
  --danger: #FF453A;
  --digit-colon: #4A4A4E;
  /* 映像面と信号表示は両テーマとも黒（Playright: well / osd） */
  --well: #000000;
  --osd: #070708;
  --osd-text: #C7C7CC;
  --osd-dim: #76767B;
  /* 字幕（2026-10-19）: 映像の上の字は白、後ろに映像の黒（well）を 72% の帯。Playright に字幕の値は無いので、OSD と同じ無彩色から作った */
  --caption-text: var(--text);
  --caption-bg: color-mix(in srgb, var(--well) 72%, transparent);

  /* --- Packet の受け手ページ（DESIGN.md: --veil = stageVeil、--dialog = dialog 80%、--silk-*） ---
     Views.php の実際の値は未受領。無彩色の白のアルファで暫定。 */
  --veil: var(--stage-veil);
  --dialog: #151517CC;
  --silk-a: #FFFFFF14;
  --silk-b: #FFFFFF09;

  /* --- 文字（Packet の Web は端末の書体だけ。外部の書体を読まない） --- */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  --font-mono: Inter, -apple-system, "Segoe UI", "SF Mono", Menlo, Consolas, monospace;
  --fs-engraved: 10px;
  --fs-xs: 11px;
  --fs-caption: 11.5px;          /* Packet: caption */
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 15px;
  --fs-input-mobile: 16px;      /* iPhone の入力フォーカス時の自動拡大を避ける */
  --input-mobile-scale: .8125; /* 入力内部16px × 13/16 = 既存の本文13px。枠の寸法は逆倍率で補正 */
  --fs-lg: 19px;
  --fs-title: 23px;              /* Packet 受け手ページの案件名（650） */
  --fs-tc: 30px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-title: 650;
  --fw-bold: 700;
  --tracking-engraved: 1.6px;

  /* --- 角丸（Playright） --- */
  --r-xs: 3px;
  --r-sm: 7px;
  --r-input: 9px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;                  /* パネル */
  --r-crystal: 16px;             /* TC の窓 */
  --r-xxl: 18px;                 /* デッキ */
  --r-disc: 26px;                /* 再生の円（52px） */
  --r-tray: 28px;                /* 受け皿（56px のカプセル） */

  /* --- 余白（Playright） --- */
  --sp-xxs: 2px;
  --sp-xs: 4px;
  --sp-sm: 6px;
  --sp-md: 8px;
  --sp-lg: 12px;
  --sp-xl: 16px;
  --sp-xxl: 24px;
  --slab-outer: 8px;             /* 板は窓の縁から 8px */
  --slab-gap: 6px;               /* 板どうしは 6px */
  --text-inset: 16px;            /* 板の中の文字は端から 16px */

  /* --- 寸法（Playright のレイアウト） --- */
  --tray-h: 56px;
  --disc: 52px;
  --signal-strip: 26px;
  --scrub-groove: 14px;
  --scrub-ruler: 16px;
  --sidebar: 380px;              /* サイドバーは一つの幅 */
  --hover-hairline: color-mix(in srgb, var(--text) 55%, transparent);
  /* メニュー・お知らせの浮き（Windows 11 のメニューの影に相当。板には使わない） */
  --pop-shadow: 0 12px 32px #00000066;

  /* 動き: Playright の臨界減衰ばねの約 95% 到達時間 */
  --motion-small: 200ms;
  --motion-slab: 320ms;
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
}