/* base.css - Anchor HQ | Stardew Valley Theme */
/* Global reset, typography, theme switching, and utilities */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; scroll-behavior: smooth; }
body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body, 'Inter', system-ui, -apple-system, sans-serif); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Selection (golden highlight) */
::selection { background: var(--gold-select, rgba(218, 165, 32, 0.35)); color: var(--text-bright, #fff8e7); }
::-moz-selection { background: var(--gold-select, rgba(218, 165, 32, 0.35)); color: var(--text-bright, #fff8e7); }

/* Custom Scrollbar (thin, warm-toned, pixel-ish) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track, #1a1410); border-left: 1px solid var(--border, rgba(139, 90, 43, 0.25)); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, #5c3d1e); border-radius: 0; border: 1px solid var(--scrollbar-thumb-border, #7a5230); image-rendering: pixelated; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover, #7a5230); }
::-webkit-scrollbar-corner { background: var(--scrollbar-track, #1a1410); }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb, #5c3d1e) var(--scrollbar-track, #1a1410); }

/* Link Reset */
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--gold, #daa520); outline-offset: 2px; border-radius: 2px; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }

/* Theme: Dark (default) - Stardew Valley Night */
:root, [data-theme="dark"] {
  --bg: #0f0d0a; --bg-soft: #1a1610; --panel: #1e1914; --panel-soft: #252019;
  --panel-hover: #2e271e; --panel-border: #3a2f22;
  --text: #e8dcc8; --text-bright: #fff8e7; --text-heading: #f5e6c8; --muted: #9b8b74;
  --gold: #daa520; --gold-soft: rgba(218,165,32,0.15); --gold-glow: rgba(218,165,32,0.25);
  --gold-select: rgba(218,165,32,0.35); --gold-bright: #f0c040;
  --wood: #6b4423; --wood-light: #8b6340; --wood-dark: #3a2415;
  --earth: #5c4a32; --earth-soft: rgba(92,74,50,0.3);
  --green: #6cbf4a; --green-soft: rgba(108,191,74,0.12);
  --yellow: #f0c040; --yellow-soft: rgba(240,192,64,0.12);
  --red: #e04040; --red-soft: rgba(224,64,64,0.12);
  --blue: #5b9bd5; --blue-soft: rgba(91,155,213,0.12);
  --purple: #9060c0; --purple-soft: rgba(144,96,192,0.12);
  --orange: #e08030; --orange-soft: rgba(224,128,48,0.12);
  --border: rgba(139,90,43,0.25); --border-accent: rgba(218,165,32,0.40);
  --border-strong: rgba(139,90,43,0.45);
  --shadow: 0 8px 32px rgba(0,0,0,0.55); --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 20px rgba(218,165,32,0.10);
  --radius: 6px; --radius-sm: 4px; --radius-pill: 999px;
  --font-pixel: 'Press Start 2P', monospace;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --sidebar-w: 240px; --topbar-h: 52px; --mobile-nav-h: 60px;
  --scrollbar-track: #1a1410; --scrollbar-thumb: #5c3d1e;
  --scrollbar-thumb-hover: #7a5230; --scrollbar-thumb-border: #7a5230;
  --ease: cubic-bezier(0.4,0,0.2,1); --duration: 180ms; --duration-slow: 320ms;
  /* Backward compat aliases (used by inline HTML/JS from v1) */
  --accent: var(--gold); --accent-soft: var(--gold-soft); --accent-glow: var(--gold-glow);
  --pink: #e8a0b0;
}

/* Theme: Light - Stardew Valley Daytime */
[data-theme="light"] {
  --bg: #f5eed8; --bg-soft: #efe6ca; --panel: #faf4e0; --panel-soft: #f0e8d0;
  --panel-hover: #e8dfc5; --panel-border: #d4c5a0;
  --text: #3a2f1e; --text-bright: #1a140a; --text-heading: #2e2210; --muted: #7a6b55;
  --gold: #b8860b; --gold-soft: rgba(184,134,11,0.12); --gold-glow: rgba(184,134,11,0.20);
  --gold-select: rgba(184,134,11,0.25); --gold-bright: #daa520;
  --wood: #a0764a; --wood-light: #c4976a; --wood-dark: #7a5630;
  --earth: #8a7658; --earth-soft: rgba(138,118,88,0.15);
  --green: #4a9030; --green-soft: rgba(74,144,48,0.12);
  --yellow: #c09020; --yellow-soft: rgba(192,144,32,0.12);
  --red: #c03030; --red-soft: rgba(192,48,48,0.10);
  --blue: #3a7ab8; --blue-soft: rgba(58,122,184,0.10);
  --purple: #7040a0; --purple-soft: rgba(112,64,160,0.10);
  --orange: #c06820; --orange-soft: rgba(192,104,32,0.10);
  --border: rgba(139,100,50,0.20); --border-accent: rgba(184,134,11,0.35);
  --border-strong: rgba(139,100,50,0.40);
  --shadow: 0 8px 32px rgba(80,60,30,0.15); --shadow-sm: 0 2px 8px rgba(80,60,30,0.10);
  --shadow-glow: 0 0 20px rgba(184,134,11,0.08);
  --scrollbar-track: #e8dfc5; --scrollbar-thumb: #c4a870;
  --scrollbar-thumb-hover: #a88c50; --scrollbar-thumb-border: #b89860;
  /* Backward compat aliases */
  --accent: var(--gold); --accent-soft: var(--gold-soft); --accent-glow: var(--gold-glow);
  --pink: #c07080;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5eed8; --bg-soft: #efe6ca; --panel: #faf4e0; --panel-soft: #f0e8d0;
    --panel-hover: #e8dfc5; --panel-border: #d4c5a0;
    --text: #3a2f1e; --text-bright: #1a140a; --text-heading: #2e2210; --muted: #7a6b55;
    --gold: #b8860b; --gold-soft: rgba(184,134,11,0.12); --gold-glow: rgba(184,134,11,0.20);
    --gold-select: rgba(184,134,11,0.25); --gold-bright: #daa520;
    --wood: #a0764a; --wood-light: #c4976a; --wood-dark: #7a5630;
    --earth: #8a7658; --earth-soft: rgba(138,118,88,0.15);
    --green: #4a9030; --green-soft: rgba(74,144,48,0.12);
    --yellow: #c09020; --yellow-soft: rgba(192,144,32,0.12);
    --red: #c03030; --red-soft: rgba(192,48,48,0.10);
    --blue: #3a7ab8; --blue-soft: rgba(58,122,184,0.10);
    --purple: #7040a0; --purple-soft: rgba(112,64,160,0.10);
    --orange: #c06820; --orange-soft: rgba(192,104,32,0.10);
    --border: rgba(139,100,50,0.20); --border-accent: rgba(184,134,11,0.35);
    --border-strong: rgba(139,100,50,0.40);
    --shadow: 0 8px 32px rgba(80,60,30,0.15); --shadow-sm: 0 2px 8px rgba(80,60,30,0.10);
    --shadow-glow: 0 0 20px rgba(184,134,11,0.08);
    --scrollbar-track: #e8dfc5; --scrollbar-thumb: #c4a870;
    --scrollbar-thumb-hover: #a88c50; --scrollbar-thumb-border: #b89860;
  }
}

/* Base Typography */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-pixel); color: var(--text-heading); line-height: 1.3; letter-spacing: 0.02em; text-rendering: optimizeSpeed; image-rendering: pixelated; }
h1 { font-size: 1.1rem; line-height: 1.4; }
h2 { font-size: 0.9rem; line-height: 1.4; }
h3 { font-size: 0.75rem; line-height: 1.4; }
h4 { font-size: 0.65rem; line-height: 1.4; }
h5, h6 { font-size: 0.58rem; line-height: 1.5; }
p, span, label, input, textarea, select, button, li, td, th { font-family: var(--font-body); }
p { line-height: 1.6; color: var(--text); }
small { font-size: 0.78rem; color: var(--muted); }
strong, b { font-weight: 700; color: var(--text-bright); }
code { font-family: 'Courier New', Courier, monospace; font-size: 0.85em; background: var(--earth-soft); color: var(--gold-bright); padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
hr { border: none; border-top: 2px solid var(--border); margin: 16px 0; border-image: repeating-linear-gradient(90deg, var(--wood) 0px, var(--wood) 4px, transparent 4px, transparent 8px) 2; }

/* Utility Classes */
.pixel-text { font-family: var(--font-pixel) !important; text-rendering: optimizeSpeed; image-rendering: pixelated; letter-spacing: 0.02em; }
.text-muted { color: var(--muted) !important; }
.text-gold { color: var(--gold) !important; }
.text-success { color: var(--green) !important; }
.text-danger { color: var(--red) !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* ─── Auth Gate ─── */
#auth-gate { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; background: var(--bg); }
.auth-card { background: var(--panel); border: 2px solid var(--wood, #6b4423); border-radius: var(--radius); padding: 40px 32px; max-width: 380px; width: 100%; text-align: center; box-shadow: var(--shadow); }
.auth-card .auth-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--gold), var(--gold-bright, #f0c040)); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 16px; border: 2px solid var(--wood, #6b4423); }
.auth-card h1 { font-family: var(--font-pixel); font-size: 0.75rem; font-weight: 700; margin: 0 0 4px; color: var(--gold-bright, #f0c040); text-shadow: 1px 1px 0 var(--wood-dark, #3a2415); }
.auth-card p { color: var(--muted); font-size: .85rem; margin: 0 0 24px; }
.auth-input { width: 100%; padding: 11px 16px; border-radius: var(--radius-sm); border: 2px solid var(--wood, #6b4423); background: var(--panel-soft); color: var(--text); font-size: .9rem; font-family: inherit; outline: none; transition: border-color 200ms; }
.auth-input:focus { border-color: var(--gold); }
.auth-error { color: var(--red); font-size: .78rem; margin: 8px 0 0; display: none; }
.auth-btn { width: 100%; margin-top: 14px; padding: 11px; border-radius: var(--radius-sm); border: 2px solid var(--wood, #6b4423); background: linear-gradient(135deg, var(--gold), var(--gold-bright, #f0c040)); color: var(--wood-dark, #3a2415); font-size: .9rem; font-weight: 700; font-family: var(--font-pixel); font-size: 0.6rem; cursor: pointer; transition: filter 180ms, transform 180ms; text-shadow: none; }
.auth-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ─── Theme Toggle Button ─── */
.theme-toggle-btn { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; color: var(--muted); cursor: pointer; font-size: 1rem; transition: all 180ms; margin-top: 8px; }
.theme-toggle-btn:hover { background: var(--earth-soft, rgba(92,74,50,0.3)); color: var(--text); border-color: var(--border-accent); }