/* ============================================================
   SeoCute — app.css
   Base styles, typography, utilities.
   Imports theme.css for all CSS variables.
   ============================================================ */

@import url('/assets/css/theme.css');

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif !important;
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.6;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Public Sans', system-ui, sans-serif !important;
  font-weight: 700;
  color: var(--color-text) !important;
  line-height: 1.3;
}
p, span, div, li, td, th, label, input, button, textarea, select, a {
  font-family: 'Public Sans', system-ui, sans-serif !important;
}
a { color: var(--color-primary); transition: color var(--transition); }
a:hover { color: var(--color-primary-hover); }

/* ── Scrollbar ── */
::-webkit-scrollbar            { width: 5px; height: 5px; }
::-webkit-scrollbar-track      { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb      { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover{ background: var(--scrollbar-hover); }

/* ── Rank badges ── */
.rank-top3   { color: #ffab00; font-weight: 700; }
.rank-top10  { color: #71dd37; font-weight: 600; }
.rank-top20  { color: #03c3ec; }
.rank-beyond { color: var(--color-muted); }
.rank-none   { color: var(--color-muted); opacity: .6; }

/* ── Theme toggle ── */
#themeToggle {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 4px 8px;
  cursor: pointer;
  color: var(--color-muted);
  transition: all var(--transition);
}
#themeToggle:hover {
  background: var(--color-hover);
  color: var(--color-text);
}