/* ============================================
   設計図ファイル — tokens.css
   ブランドのカラー・タイポ・スペースの基本定義。
   変更時はサイト全体に波及するので意識的に。
   出典: /mnt/nas/メモ/話題のアレで呑める店カラーコード.json
   ============================================ */

:root {
  /* === Brand colors === */
  --bg: #fdfaf6;
  --paper: #f6efe1;
  --text: #2b2b2b;
  --text-soft: #5a5550;
  --yellow: #ffb703;
  --orange: #fb8500;
  --red: #e63946;
  --blue: #219ebc;
  --board: #1f1d1a;
  --board-text: #f6f1e6;
  --line: #06c755;

  /* === Typography === */
  --font-marker: "Yusei Magic", "Noto Sans JP", sans-serif;
  --font-hand: "Yomogi", "Noto Sans JP", cursive;
  --font-body: "Noto Sans JP", system-ui, sans-serif;

  /* === Spacing / radius / shadow === */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-pop: 3px 3px 0 var(--text);
  --shadow-pop-lg: 5px 5px 0 var(--text);
  --shadow-pop-sm: 2px 2px 0 var(--text);

  /* === Borders === */
  --border-thin: 1.5px solid var(--text);
  --border: 2px solid var(--text);
  --border-thick: 2.5px solid var(--text);
  --border-dashed: 2px dashed var(--text);
}

/* === Base resets === */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  background-image:
    radial-gradient(circle at 14% 8%, rgba(255,183,3,.12), transparent 38%),
    radial-gradient(circle at 88% 92%, rgba(230,57,70,.08), transparent 40%),
    repeating-linear-gradient(135deg, transparent 0 6px, rgba(43,43,43,.012) 6px 7px);
  min-height: 100vh;
  line-height: 1.6;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

.marker { font-family: var(--font-marker); }
.hand { font-family: var(--font-hand); }

/* マーカー風アンダーライン */
.acc-yellow {
  background: linear-gradient(transparent 60%, rgba(255,183,3,.6) 60% 90%, transparent 90%);
  padding: 0 4px;
}
.acc-red {
  background: linear-gradient(transparent 62%, rgba(230,57,70,.55) 62% 90%, transparent 90%);
  padding: 0 6px;
}

/* スクリーンリーダー専用 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}