/* ═══════════════════════════════════════════════════════════════════════
   Orion — Editorial Theme (Warm Cream & Obsidian)
   Single source of truth. Linked from every page.
   Paired with Tailwind CDN color overrides below so utility classes
   resolve to the warm-cream palette.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  /* Warm Cream & Obsidian — private-banking / editorial palette */
  --surface: #f7f3ec;
  --surface-low: #f1ece2;
  --surface-container: #ffffff;
  --surface-high: #ebe4d4;
  --surface-highest: #ddd5c3;
  --primary: #8b6f47;         /* brass */
  --primary-dim: #6b5233;
  --secondary: #5c4a38;       /* walnut */
  --secondary-dim: #3f3326;
  --success: #4a6b4a;
  --warning: #b8823a;
  --error: #a63a3a;
  --error-dim: #7d2828;
  --on-surface: #1a1614;      /* obsidian */
  --on-surface-variant: #6b6259;
  --outline: #b5ac9c;
  --outline-variant: #d9d2c3;
  --paper: #faf7f2;
  --ink: #1a1614;
  --bronze: #8b6f47;
  --silver: #8a8275;
  --gold: #b8823a;
  --diamond: #5c4a38;
}

/* ─── Base typography + body ─── */
body {
  background: var(--surface);
  background-image: none;
  color: var(--on-surface);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, .font-headline {
  font-family: 'Fraunces', Georgia, serif;
  font-feature-settings: "ss01";
  letter-spacing: -0.015em;
}

/* ─── Editorial utility helpers ─── */
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.font-mono, .num, .tabular {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.rule      { height: 1px; background: var(--outline-variant); width: 100%; }
.rule-ink  { height: 1px; background: var(--ink); width: 48px; }
.caption {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--on-surface-variant);
  font-size: 13px;
}

/* ─── Core components ─── */
.glass-panel {
  background: var(--surface-container);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--outline-variant);
  box-shadow: 0 1px 2px rgba(26,22,20,0.03), 0 1px 0 rgba(255,255,255,0.6) inset;
}

.btn-gradient {
  background: var(--ink) !important;
  background-image: none !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink);
  box-shadow: 0 1px 2px rgba(26,22,20,0.12);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.01em;
  font-weight: 500;
}
.btn-gradient:hover {
  background: #2b2422 !important;
  box-shadow: 0 2px 8px rgba(26,22,20,0.18);
  transform: translateY(-1px);
}
.btn-gradient:active { transform: scale(0.99); }

.btn-ghost {
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
  transition: background 0.15s, border-color 0.15s;
}
.btn-ghost:hover {
  background: var(--surface-low);
  border-color: var(--ink);
}

.btn-brass {
  background: var(--primary);
  color: #faf7f2;
  border: 1px solid var(--primary-dim);
  transition: background 0.15s;
}
.btn-brass:hover { background: var(--primary-dim); }

.chip {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chip-success { background: rgba(74,107,74,0.10);  color: #3d5a3d; border: 1px solid rgba(74,107,74,0.25); }
.chip-error   { background: rgba(166,58,58,0.10);  color: #8f3232; border: 1px solid rgba(166,58,58,0.25); }
.chip-warning { background: rgba(184,130,58,0.10); color: #8f6429; border: 1px solid rgba(184,130,58,0.28); }
.chip-live    { background: rgba(139,111,71,0.08); color: var(--primary-dim); border: 1px solid rgba(139,111,71,0.25); }

.stat-card {
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
  cursor: default;
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
}
.stat-card:hover {
  border-color: var(--ink);
  box-shadow: 0 1px 0 rgba(26,22,20,0.04);
}
.stat-card::after { display: none; }

/* Inputs / textareas / selects */
input[type="text"], input[type="url"], input[type="email"],
input[type="password"], input[type="number"], input[type="search"],
textarea, select {
  background: var(--surface-container);
  color: var(--on-surface);
  border-color: var(--outline-variant);
}
input[type="text"]:focus, input[type="url"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus,
textarea:focus, select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(139,111,71,0.12);
}
::placeholder { color: var(--on-surface-variant); opacity: 0.6; }
::selection { background: var(--primary); color: var(--paper); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-low); }
::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--secondary); }

/* Section header */
.section-header {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-header::before { content: ''; width: 24px; height: 1px; background: var(--ink); }
.section-header::after  { content: ''; flex: 1;    height: 1px; background: var(--outline-variant); }

/* Score colors */
.score-high { color: #3d5a3d !important; }
.score-mid  { color: #8f6429 !important; }
.score-low  { color: #8f3232 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   TAILWIND CDN UTILITY OVERRIDES — force the warm-cream palette
   These beat any `bg-primary/10`, `border-secondary/30`, etc. regardless
   of what the page's Tailwind config defined.
   ═══════════════════════════════════════════════════════════════════════ */

/* Surfaces */
.bg-surface,
.bg-surface\/60, .bg-surface\/40, .bg-surface\/90         { background-color: var(--surface) !important; }
.bg-surface-low,
.bg-surface-low\/50, .bg-surface-low\/30                   { background-color: var(--surface-low) !important; }
.bg-surface-high,
.bg-surface-high\/50, .bg-surface-high\/30                 { background-color: var(--surface-high) !important; }
.bg-surface-container                                       { background-color: var(--surface-container) !important; }

/* Tint backgrounds */
.bg-primary\/5, .bg-primary\/8                             { background-color: rgba(139,111,71,0.06) !important; }
.bg-primary\/10, .bg-primary\/15, .bg-primary\/20          { background-color: rgba(139,111,71,0.10) !important; }
.bg-primary\/30                                             { background-color: rgba(139,111,71,0.18) !important; }
.bg-secondary\/5, .bg-secondary\/8                         { background-color: rgba(92,74,56,0.05) !important; }
.bg-secondary\/10, .bg-secondary\/15, .bg-secondary\/20    { background-color: rgba(92,74,56,0.08) !important; }
.bg-warning\/10, .bg-warning\/15, .bg-warning\/20          { background-color: rgba(184,130,58,0.10) !important; }
.bg-success\/10, .bg-success\/15, .bg-success\/20          { background-color: rgba(74,107,74,0.10) !important; }
.bg-error\/10, .bg-error\/15, .bg-error\/20                { background-color: rgba(166,58,58,0.10) !important; }

/* Borders */
.border-primary\/10, .border-primary\/15,
.border-primary\/20, .border-primary\/30                   { border-color: rgba(139,111,71,0.25) !important; }
.border-secondary\/20, .border-secondary\/30               { border-color: rgba(92,74,56,0.25) !important; }
.border-outline-variant\/10, .border-outline-variant\/15,
.border-outline-variant\/20, .border-outline-variant\/30   { border-color: var(--outline-variant) !important; }

/* Text colors — preserve semantic but remap to muted editorial */
.text-primary                                               { color: var(--primary-dim) !important; }
.text-secondary                                             { color: var(--secondary) !important; }
.text-success                                               { color: #3d5a3d !important; }
.text-warning                                               { color: #8f6429 !important; }
.text-error                                                 { color: #8f3232 !important; }
.text-on-surface                                            { color: var(--on-surface) !important; }
.text-on-surface-variant                                    { color: var(--on-surface-variant) !important; }
.text-on-surface-variant\/30, .text-on-surface-variant\/40,
.text-on-surface-variant\/50, .text-on-surface-variant\/60,
.text-on-surface-variant\/70                                { color: var(--on-surface-variant) !important; opacity: 0.7; }

/* Kill Tailwind gradient utilities */
.bg-gradient-to-r, .bg-gradient-to-l, .bg-gradient-to-t, .bg-gradient-to-b,
.bg-gradient-to-br, .bg-gradient-to-tr, .bg-gradient-to-bl, .bg-gradient-to-tl {
  background-image: none !important;
}

/* Kill glows / purple halos from the old dark design */
.glow-primary, .glow-primary-strong, .glow-secondary, .glow-gold, .glow-diamond {
  box-shadow: 0 0 0 1px rgba(139,111,71,0.22) !important;
}

/* Card hover — restrained */
.card-hover-lift { transition: border-color 0.15s, box-shadow 0.15s !important; }
.card-hover-lift:hover {
  border-color: var(--outline) !important;
  box-shadow: 0 1px 2px rgba(26,22,20,0.04) !important;
  transform: none !important;
}
.card-hover:hover {
  border-color: var(--ink) !important;
  box-shadow: 0 1px 3px rgba(26,22,20,0.06) !important;
}

/* Beta pill — brass, no rainbow */
.beta-pill {
  background: var(--primary) !important;
  background-image: none !important;
  color: var(--paper) !important;
  animation: none !important;
  box-shadow: none !important;
}

/* Rank colors — muted metallic */
.rank-gold    { color: #b8823a !important; text-shadow: none !important; }
.rank-silver  { color: #8a8275 !important; text-shadow: none !important; }
.rank-bronze  { color: #8b6f47 !important; text-shadow: none !important; }
.rank-diamond { color: #5c4a38 !important; text-shadow: none !important; }
.rank-master  { color: var(--ink) !important; text-shadow: none !important; }

/* Gradient-text fallback — brass italic display */
.gradient-text {
  color: var(--primary-dim) !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--primary-dim) !important;
  animation: none !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic;
  font-weight: 400;
}

/* Quiet floating/bouncy animations */
.stat-icon, .empty-state-icon { animation: none !important; }

/* Toasts — paper with soft shadow */
.toast-success { background: var(--surface-container) !important; color: #3d5a3d !important; border: 1px solid rgba(74,107,74,0.35) !important; box-shadow: 0 6px 20px rgba(26,22,20,0.12); }
.toast-error   { background: var(--surface-container) !important; color: #8f3232 !important; border: 1px solid rgba(166,58,58,0.35) !important; box-shadow: 0 6px 20px rgba(26,22,20,0.12); }
.toast-info    { background: var(--surface-container) !important; color: var(--primary-dim) !important; border: 1px solid rgba(139,111,71,0.35) !important; box-shadow: 0 6px 20px rgba(26,22,20,0.12); }

/* Spinner */
.spinner {
  border: 2px solid var(--outline-variant) !important;
  border-top-color: var(--ink) !important;
}

/* Progress bars */
.prog-track { background: var(--surface-high) !important; }
.prog-fill  { background: var(--ink) !important; background-image: none !important; }
.xp-track   { background: var(--surface-high) !important; }
.xp-fill    { background: var(--primary) !important; background-image: none !important; box-shadow: none !important; }

/* Links inherit body */
a { color: inherit; }
a:hover { color: var(--ink); }

/* HTML html.dark — disable if set */
html.dark body { background: var(--surface); color: var(--on-surface); }