/* ============================================================
   PYTHIC COSMOS - OAK & ASH
   Single site look. No theme switcher, no data-theme needed.
   Overrides the base :root palette and loads LAST.
   Keep this the only stylesheet <link> after the base <style>.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Atkinson+Hyperlegible:wght@400;700&display=swap');

:root {
  /* parchment grounds */
  --paper:  #EFE6D3;
  --paper-2:#E7DCC4;
  --paper-3:#DED1B4;
  --surface:#F5EEDD;

  /* ink, warm-dark to ash */
  --ink:  #2B2419;
  --ink-2:#5B4A30;
  --ink-3:#7C7365;
  --ink-4:#ABA290;

  /* brass-tinted hairlines */
  --line:  #DDD0AE;
  --line-2:#CBB98A;

  /* oak for fills and headings, brass as the light accent */
  --accent:  #514027;
  --accent-2:#3C2F1B;
  --accent-3:#9C8149;
  --accent-soft:  #EDE3C6;
  --accent-softer:#F4EEDD;

  /* remap every legacy variable the app uses onto oak & ash */
  --gold: var(--accent-3); --gold-dim: var(--accent); --gold-bright: var(--accent-2);
  --bg-deep: var(--paper); --bg-mid: var(--paper-2);
  --bg-card: var(--surface); --bg-card-solid: var(--surface);
  --border: var(--line); --border-dim: var(--line);
  --text: var(--ink); --text-dim: var(--ink-2); --text-muted: var(--ink-3);
  --text-faint: var(--ink-3); --text-ghost: var(--ink-4); --text-deepghost: var(--ink-4);
  --accent-red: #793729;

  /* wheel element wedges, muted and earthy */
  --fire: #9E5A3C; --earth: #6F7355; --air: #9C8149; --water: #4A6B6E;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Atkinson Hyperlegible', -apple-system, system-ui, sans-serif;
  --font-mono: 'Atkinson Hyperlegible', ui-monospace, monospace;
  --radius: 12px;
}

/* ---- ground ------------------------------------------------ */
html { background: var(--paper) !important; }
body {
  background: linear-gradient(170deg, #F1E8D6 0%, #EBE0CA 55%, #E7DBC3 100%) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
}

/* ---- header + wordmark ------------------------------------- */
.header {
  background: linear-gradient(180deg, rgba(243,234,214,0.97), rgba(239,230,211,0.90)) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: none !important;
}
.brand h1 {
  font-family: var(--font-serif) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
}
.brand-sub {
  font-family: var(--font-serif) !important;
  color: var(--ink-3) !important;
  letter-spacing: 0.22em !important;
  font-variant: small-caps !important;
  text-transform: lowercase !important;
  font-weight: 600 !important;
}

/* ---- nav --------------------------------------------------- */
.nav-btn {
  font-family: var(--font-sans) !important;
  color: var(--ink-3) !important;
  border-color: var(--line) !important;
}
.nav-btn:hover { color: var(--ink) !important; }
.nav-btn.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-bottom-color: var(--accent-soft) !important;
}
.nav-btn.active::after { background: var(--accent) !important; opacity: 0.8 !important; }
.nav-admin::before { background: var(--accent) !important; }

/* ---- controls ---------------------------------------------- */
.controls { background: var(--paper-2) !important; border-bottom: 1px solid var(--line) !important; }
.ctrl-input, .ctrl-btn, .eph-btn {
  background: var(--surface) !important; border: 1px solid var(--line-2) !important;
  color: var(--ink-2) !important; font-family: var(--font-sans) !important;
}
.ctrl-input { color: var(--ink) !important; }
.ctrl-btn:hover, .eph-btn:hover { border-color: var(--accent) !important; color: var(--ink) !important; background: var(--accent-soft) !important; }
.ctrl-btn.today, .eph-btn.active { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.moon-phase-indicator { font-family: var(--font-sans) !important; color: var(--ink-3) !important; }

/* one look only: hide the switcher */
.theme-switcher { display: none !important; }
.zoom-level { font-family: var(--font-sans) !important; color: var(--ink-3) !important; }

/* ---- cards + titles ---------------------------------------- */
.card {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 3px rgba(43,36,25,0.06) !important;
}
.card-title {
  font-family: var(--font-serif) !important;
  color: var(--ink-3) !important;
  letter-spacing: 0.2em !important;
  font-variant: small-caps !important;
  text-transform: lowercase !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

/* ---- rows + tables ----------------------------------------- */
.planet-name { font-family: var(--font-sans) !important; color: var(--ink) !important; }
.planet-sign-name, .planet-degree, .planet-category, .planet-speed,
.aspect-name, .aspect-orb, .eph-table, .aspect-grid-table,
.moon-detail, .chart-date-label, .weather-text { font-family: var(--font-sans) !important; }
.planet-symbol { filter: none !important; }
.planet-row:hover, .aspect-row:hover, .eph-table tbody tr:hover { background: var(--paper-2) !important; }
.aspect-row { background: transparent !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; }
.aspect-applying { color: #3B6D4A !important; }
.planet-rx, .eph-rx { color: var(--accent-red) !important; }
.planet-rx { background: rgba(121,55,41,0.10) !important; }
.eph-table th, .eph-table th:first-child, .eph-table td:first-child { background: var(--surface) !important; border-bottom: 1px solid var(--line) !important; }
.eph-table td { border-bottom: 1px solid var(--line) !important; color: var(--ink-2) !important; }
.eph-sign { color: var(--accent-3) !important; }
.moon-name { font-family: var(--font-serif) !important; color: var(--accent) !important; }

/* ---- report + shop + weather ------------------------------- */
.report-body, .report-body .rpt-text {
  font-family: var(--font-serif) !important; color: var(--ink) !important;
  font-size: 1.12rem !important; line-height: 1.75 !important;
}
.report-body .rpt-heading { font-family: var(--font-sans) !important; color: var(--accent) !important; }
.report-body .rpt-text em { color: var(--accent) !important; }
.report-body::first-letter {
  font-family: var(--font-serif); font-size: 3.1em; font-weight: 600;
  line-height: 0.8; float: left; margin: 4px 10px 0 0; color: var(--accent-3);
}
.writing-prompt { background: var(--paper-2) !important; font-family: var(--font-sans) !important; }
.writing-prompt strong { color: var(--accent) !important; }
.weather-theme.high { background: var(--accent-softer) !important; }
.weather-theme.medium { background: var(--paper-2) !important; }
.config-title, .pdf-product-title { font-family: var(--font-serif) !important; color: var(--ink) !important; }
.pdf-product-card, .gumroad-config, .gumroad-links { background: var(--surface) !important; border-color: var(--line) !important; backdrop-filter: none !important; }
.pdf-gen-btn, .copy-btn, .rpt-tab, .fmt-tab, .ig-fmt, .copy-link-btn {
  font-family: var(--font-sans) !important; background: var(--surface) !important;
  border: 1px solid var(--line-2) !important; color: var(--ink-2) !important;
}
.pdf-gen-btn { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.rpt-tab.active, .fmt-tab.active, .ig-fmt.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.wf-num { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ---- footer + scrollbar ------------------------------------ */
.footer { border-top: 1px solid var(--line) !important; }
.footer-tech, .footer-pythia { font-family: var(--font-sans) !important; color: var(--ink-3) !important; }
::-webkit-scrollbar-track { background: var(--paper) !important; }
::-webkit-scrollbar-thumb { background: var(--line-2) !important; }

/* ---- depth panel: pull hardcoded greens back to oak -------- */
#depthContent [style*="border-left"], #depthAspects [style*="border-left"] { border-left-color: var(--accent) !important; }
.depth-tab { font-family: var(--font-sans) !important; border: 1px solid var(--line-2) !important; }
.depth-tab.active { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent) !important; }