/* Keiba Brief — Design Tokens
   Generated from design_handoff_keiba_brief_redesign/docs/TOKENS.md */

:root {
  /* ── ベースカラー ── */
  --color-bg: #f7f8fb;
  --color-panel: #ffffff;
  --color-panel-alt: #f1f3f8;
  --color-border: #e3e6ee;
  --color-border-strong: #cdd2dc;
  --color-text: #0f172a;
  --color-text-dim: #475569;
  --color-text-mute: #7a8499;

  /* ── アクセントカラー（ページ別トーン） ── */
  --color-indigo: #4f46e5;
  --color-indigo-deep: #3730a3;
  --color-indigo-soft: #eef2ff;

  --color-blue: #1e6fd9;
  --color-blue-deep: #1e40af;
  --color-blue-soft: #dbeafe;

  --color-teal: #0d9488;
  --color-teal-deep: #115e59;
  --color-teal-soft: #ccfbf1;

  --color-purple: #7c3aed;
  --color-purple-deep: #581c87;
  --color-purple-soft: #ede9fe;

  --color-amber: #d97706;
  --color-amber-deep: #9a3412;
  --color-amber-soft: #fef3c7;

  --color-red: #dc2626;
  --color-red-deep: #7f1d1d;
  --color-red-soft: #fee2e2;

  --color-rose: #e11d48;

  /* ── ステータスカラー ── */
  --color-good: #16a34a;
  --color-bad: #dc2626;

  /* ── 印カラー ── */
  --mark-honmei-bg: #dc2626;
  --mark-taikou-bg: #ea580c;
  --mark-tanana-bg: #2563eb;
  --mark-renka-bg:  #16a34a;
  --mark-ana-bg:    #9333ea;

  /* ── グレードカラー ── */
  --grade-double-circle: #dc2626;
  --grade-circle:        #ea580c;
  --grade-triangle:      #94a3b8;
  --grade-cross:         #64748b;
  --grade-special-good:  #b91c1c;
  --grade-special-bad:   #475569;

  /* ── JRA枠色 ── */
  --waku-1-bg: #ffffff; --waku-1-fg: #000000; --waku-1-border: #111111;
  --waku-2-bg: #111111; --waku-2-fg: #ffffff; --waku-2-border: #111111;
  --waku-3-bg: #E60012; --waku-3-fg: #ffffff; --waku-3-border: #E60012;
  --waku-4-bg: #0067C0; --waku-4-fg: #ffffff; --waku-4-border: #0067C0;
  --waku-5-bg: #FFE100; --waku-5-fg: #000000; --waku-5-border: #cfa800;
  --waku-6-bg: #009A44; --waku-6-fg: #ffffff; --waku-6-border: #009A44;
  --waku-7-bg: #F39800; --waku-7-fg: #000000; --waku-7-border: #c87400;
  --waku-8-bg: #F4ACBE; --waku-8-fg: #000000; --waku-8-border: #c47a8b;

  /* ── タイポグラフィ ── */
  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;

  /* ── 余白（8pxベース） ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;

  /* ── 角丸 ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ── シャドウ ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-hot: 0 6px 20px rgba(217,119,6,0.15);

  /* ── ヒーロー帯（グラデ） ── */
  --hero-home: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%);
  --hero-today: linear-gradient(135deg, #1e40af 0%, #1e6fd9 100%);
  --hero-race-g1: linear-gradient(135deg, #7f1d1d 0%, #dc2626 100%);
  --hero-race-g2: linear-gradient(135deg, #9a3412 0%, #d97706 100%);
  --hero-race-g3: linear-gradient(135deg, #1e40af 0%, #1e6fd9 100%);
  --hero-race-l:  linear-gradient(135deg, #581c87 0%, #7c3aed 100%);
  --hero-race-op: linear-gradient(135deg, #115e59 0%, #0d9488 100%);
  --hero-race-other: linear-gradient(135deg, #475569 0%, #64748b 100%);
  --hero-stats: linear-gradient(135deg, #115e59 0%, #0d9488 100%);
  --hero-archive: linear-gradient(135deg, #581c87 0%, #7c3aed 100%);
  --hero-markdetail: linear-gradient(135deg, #9a3412 0%, #d97706 100%);
  --hero-about: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%);
}

/* ── 基本リセット ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }

/* ── 数値用ユーティリティ ── */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── スクロールバー ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cdd2dc; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
</content>