/* SNAPGATE CLOUD — 共通トークン
   写真用紙の白 / 濃紺のインク / 背景紙の青 / 裁ち線の赤（エラーだけ） */
:root {
  --paper: #F7F9FB;
  --sheet: #FFFFFF;
  --ink: #1D2733;
  --ink-2: #4A5866;
  --ink-3: #7B8794;
  --rule: #D5DDE5;
  --backdrop: #2F7FB5;      /* 主ボタン・リンク。証明写真の背景紙の青 */
  --backdrop-deep: #1F5F8B;
  --sky: #E3F0F8;           /* 選択中・薄い背景 */
  --trim: #C8372F;          /* エラー・削除。印刷の裁ち線の赤 */
  --trim-tint: #FBEAE8;
  --ok: #2E7D4F;
  --ok-tint: #E4F3EA;
  --wait: #B7791F;
  --wait-tint: #FBF1DE;
  --radius: 6px;
  --font: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-num: "BIZ UDGothic", "BIZ UDPGothic", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12181F; --sheet: #1A222B; --ink: #E8EDF2; --ink-2: #B4C0CC; --ink-3: #8794A1;
    --rule: #2E3A46; --backdrop: #5AA7DB; --backdrop-deep: #7DBCE6; --sky: #1E3344;
    --trim: #F0766D; --trim-tint: #3A1F1E; --ok: #5CC28A; --ok-tint: #1A3326; --wait: #E5B55A; --wait-tint: #3A2F18;
  }
}
:root[data-theme="dark"] {
  --paper: #12181F; --sheet: #1A222B; --ink: #E8EDF2; --ink-2: #B4C0CC; --ink-3: #8794A1;
  --rule: #2E3A46; --backdrop: #5AA7DB; --backdrop-deep: #7DBCE6; --sky: #1E3344;
  --trim: #F0766D; --trim-tint: #3A1F1E; --ok: #5CC28A; --ok-tint: #1A3326; --wait: #E5B55A; --wait-tint: #3A2F18;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.7 var(--font); }
a { color: var(--backdrop); }
:focus-visible { outline: 3px solid var(--backdrop); outline-offset: 2px; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* トンボ（裁ち線）: 写真や用紙を表す枠の四隅に付ける。このシステムの目印 */
.tombo { position: relative; }
.tombo::before, .tombo::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border-color: var(--ink-3); border-style: solid;
}
.tombo::before { top: -6px; left: -6px; border-width: 1px 0 0 1px; }
.tombo::after { bottom: -6px; right: -6px; border-width: 0 1px 1px 0; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }