/* Genesis · 2026 UI layer — JRA-inspired structure, Genesis green/ivory palette. */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --bg: #f2efe7;
  --bg-soft: #e8e3d8;
  --surface: #fffdf8;
  --surface-solid: #fffdf8;
  --text: #17211e;
  --text-soft: #34433d;
  --muted: #6d7972;
  --muted-2: #929b95;
  --line: rgba(23, 33, 30, 0.16);
  --line-soft: rgba(23, 33, 30, 0.08);
  --accent: #0b5d4b;
  --accent-strong: #073f34;
  --seal: #b43b2e;
  --green: #0b5d4b;
  --sky: #e8e3d8;
  --shadow: 0 14px 40px rgba(20, 35, 30, 0.08);
}

html { background: var(--bg); }
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* Remove the old sun/moon affordance; theme is now a single editorial light system. */
.theme-toggle,
[data-theme-toggle],
#themeToggle,
.theme-switch,
.sun-toggle,
.moon-toggle { display: none !important; }

/* Header — thin racing-green rule, compact editorial nav. */
header {
  background: rgba(255, 253, 248, 0.96) !important;
  border-bottom: 2px solid var(--accent) !important;
  box-shadow: 0 1px 0 rgba(23, 33, 30, 0.06);
  backdrop-filter: blur(12px);
}
header a { color: var(--text); }
header nav a,
.site-nav a {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  padding: 7px 8px;
  border-radius: 3px;
}
header nav a:hover,
.site-nav a:hover { background: var(--bg-soft); color: var(--accent); }
.brand b, .site-brand b { letter-spacing: 0.01em; }
.brand-mark, .brand-badge {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 2px !important;
}

main, .g-main { color: var(--text); }
h1, h2, h3, .display, .hero-title {
  font-family: "Iowan Old Style", "Palatino Linotype", "Songti SC", "STSong", serif;
  letter-spacing: -0.02em;
  color: var(--text);
}
.eyebrow, .kicker, .section-kicker {
  color: var(--accent) !important;
  letter-spacing: 0.18em;
  font-weight: 700;
}

/* Panels and cards: crisp white sheets, no soft rounded “app” look. */
section, .panel, .card, .data-panel, .breeding-panel, .record-section {
  border-radius: 4px !important;
}
.data-panel, .breeding-panel, .record-section {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.board-post, .account-card, .race-hero-card, .horse-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

/* Buttons: green primary, vermilion danger; squared, editorial. */
button, .btn {
  border-radius: 3px !important;
  box-shadow: none !important;
}
.btn--gold, .btn--primary, button[type="submit"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn--gold:hover, .btn--primary:hover, button[type="submit"]:hover { background: var(--accent-strong) !important; }
.btn--ghost { background: transparent !important; border-color: var(--line) !important; color: var(--text) !important; }
.review-delete, .danger { color: var(--seal) !important; border-color: rgba(180, 59, 46, 0.35) !important; }

/* Data tables: strong green header, ivory bands, monospaced figures. */
.race-table, .data-table, table {
  border-color: var(--line) !important;
}
.race-table thead th,
.data-table thead th,
table thead th {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent-strong) !important;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.race-table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even) { background: #f7f4ed !important; }
.race-table tbody tr:hover { background: #e9f0ec !important; }
.race-table td, .data-table td { border-color: var(--line-soft) !important; }
.race-table td:nth-child(3) { color: var(--accent) !important; font-weight: 700; }
.race-table td:nth-child(2) { color: var(--muted) !important; }

/* Region + title chips read as official racecard tags, not neon pills. */
.user-title, .region-badge, .race-event-country {
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  background: #edf4f0 !important;
  border-radius: 2px !important;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.race-grade, .grade-badge { color: var(--seal) !important; border-color: var(--seal) !important; }

/* Section rhythm */
.record-section, .breeding-panel, .data-panel { padding: clamp(16px, 2.4vw, 28px) !important; }
.section-head { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 14px; }
.section-head h2 { margin: 2px 0 0; }
.breeding-note, .section-note, .empty-note { color: var(--muted) !important; }

/* Forms */
input, textarea, select {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 2px !important;
  color: var(--text) !important;
}
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(11, 93, 75, 0.25); border-color: var(--accent) !important; }

/* Mobile */
@media (max-width: 720px) {
  header { position: relative !important; }
  .site-nav, header nav { gap: 2px; overflow-x: auto; }
}

.brand, .site-brand { display: inline-flex; align-items: center; gap: 9px; }
.brand small, .site-brand small { display: block; margin-top: 1px; font-size: 9px; letter-spacing: 0.08em; color: var(--muted); }

/* Dark theme palette */
html[data-theme="dark"] {
  --bg: #0b1114;
  --bg-soft: #111a1b;
  --surface: #15201f;
  --surface-solid: #192523;
  --text: #ece6d9;
  --text-soft: #c9c2b5;
  --muted: #989f98;
  --muted-2: #737d77;
  --line: rgba(236, 230, 217, 0.16);
  --line-soft: rgba(236, 230, 217, 0.08);
  --accent: #e0bf7a;
  --accent-strong: #f0d69a;
  --seal: #d06a5a;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] body { background: var(--bg) !important; color: var(--text) !important; }
html[data-theme="dark"] header { background: rgba(17, 26, 27, .96) !important; border-color: var(--accent) !important; }
html[data-theme="dark"] .data-panel,
html[data-theme="dark"] .home-block,
html[data-theme="dark"] .horse-tile,
html[data-theme="dark"] .race-event-card,
html[data-theme="dark"] .account-card { background: var(--surface) !important; color: var(--text) !important; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background: #0f1818 !important; color: var(--text) !important; border-color: var(--line) !important; }
.theme-toggle, [data-theme-toggle], #themeToggle { display: inline-flex !important; }