/* Landing-page palette and type for the app pages. Loaded after styles.css; colors and fonts only. */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-roman.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-next.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #131314;
  --surface: #1b1b1d;
  --surface-soft: #232326;
  --surface-lift: #2c2c30;
  --ink: #ebe8e3;
  --muted: #9d9a95;
  --line: rgb(var(--ink-rgb) / 0.13);
  --line-strong: rgb(var(--ink-rgb) / 0.24);
  --accent: #d9a46c;
  --accent-dark: #c08c56;
  --teal: #c4a16c;
  --silver: #c9c6c1;
  --red: #e8806f;
  --focus: 0 0 0 3px rgb(var(--accent-rgb) / 0.35);
  --theme-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --theme-sans: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.dashboard-page {
  --dashboard-bg: #131314;
  --dashboard-surface: #1b1b1d;
  --dashboard-surface-2: #232326;
  --dashboard-border: rgb(var(--ink-rgb) / 0.12);
  --dashboard-text: #ebe8e3;
  --dashboard-muted: #9d9a95;
  --dashboard-accent: #d9a46c;
  --dashboard-accent-hover: #e6b886;
  --dashboard-accent-soft: rgb(var(--accent-rgb) / 0.12);
  --dashboard-teal: #c4a16c;
}

body {
  background: var(--bg);
  font-family: var(--theme-sans);
}

.qtc-tool {
  font-family: var(--theme-sans);
}

/* Serif headings, matching the front page */
.auth-form-shell h1,
.detail-title,
.library-browse h1,
.qtc-tool__head h1,
.dashboard-main h1,
.notebook-search-header h2,
.info-section h2,
.dashboard-card__head h2,
.dashboard-about h2,
.brand-name,
.dashboard-brand-name {
  font-family: var(--theme-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  font-synthesis: none;
}

.auth-form-shell h1,
.detail-title {
  color: var(--ink);
}

.dashboard-card__head h2,
.dashboard-about h2 {
  font-size: 1.2rem;
}

/* Hard-coded colors in styles.css that tokens don't reach */
.auth-links a {
  color: var(--ed-link, #b0caee);
}

.tag {
  border-color: rgb(var(--ink-rgb) / 0.2);
  background: rgb(var(--ink-rgb) / 0.05);
  color: var(--tag-ink, #e2c79c);
}

.notebook-result,
.source-list-item {
  background: var(--surface-soft);
}

.notebook-result p,
.update-card p,
.info-section li,
.dose-grid span {
  color: var(--silver);
}

.primary-button:hover,
.topbar-link:hover {
  background: var(--accent-hover, #b0caee);
  border-color: var(--accent-hover, #b0caee);
}

/* Navy and teal panels from the old palette */
.dashboard-topbar {
  background: rgb(var(--bg-rgb) / 0.88);
}

.side-menu-toggle,
.dose-calculator,
.calculator-result,
.library-panel,
.detail-panel,
.editor-sidebar,
.editor-form,
.members-panel {
  background: rgb(var(--surface-rgb) / 0.96);
}

.auth-card {
  background:
    radial-gradient(circle at top right, rgb(var(--ink-rgb) / 0.04), transparent 34%),
    radial-gradient(circle at bottom left, rgb(var(--ink-rgb) / 0.033), transparent 38%),
    rgb(var(--surface-rgb) / 0.96);
}

.toolbar {
  background:
    linear-gradient(180deg, rgb(var(--ink-rgb) / 0.027), rgb(var(--surface-rgb) / 0)),
    radial-gradient(circle at top left, rgb(var(--ink-rgb) / 0.033), transparent 42%);
}

.notebook-search-panel {
  border-color: rgb(var(--ink-rgb) / 0.1);
  background:
    radial-gradient(circle at top right, rgb(var(--ink-rgb) / 0.033), transparent 32%),
    rgb(var(--surface-rgb) / 0.96);
}

.topbar {
  background: rgb(var(--bg-rgb) / 0.92);
}

input,
select,
textarea {
  background: var(--field-bg, #0f0f10);
}

/* Teal borders become brass */
.side-menu-toggle,
.dose-calculator,
.calculator-result,
.auth-card,
.auth-form-shell,
.library-panel,
.notebook-answer {
  border-color: rgb(var(--ink-rgb) / 0.1);
}

.detail-hero {
  background:
    radial-gradient(circle at top right, rgb(var(--ink-rgb) / 0.04), transparent 34%),
    linear-gradient(135deg, rgb(var(--ink-rgb) / 0.023), transparent 42%),
    var(--surface);
}

/* Benzodiazepine equivalent dose calculator (formulas page) */
.dashboard-calculator-fields select,
.dashboard-equiv-output {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--dashboard-border);
  border-radius: 9px;
  background: var(--dashboard-surface-2);
  color: var(--dashboard-text);
  font: inherit;
}

.dashboard-calculator-fields select:focus {
  border-color: var(--dashboard-accent);
  outline: none;
}

.dashboard-equiv-side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.dashboard-equiv-output {
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 1.1rem;
}

.dashboard-equiv-note,
.dashboard-equiv-refs {
  margin: 0;
  color: var(--dashboard-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.dashboard-equiv-ref-head {
  margin: 0;
  font-size: 0.95rem;
}

.dashboard-equiv-refs {
  padding-left: 1.4em;
}

/* Formulas page: list of calculators */
.dashboard-formula-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.dashboard-formula-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.dashboard-formula-link:hover,
.dashboard-formula-link:focus-visible {
  border-color: var(--dashboard-accent);
}

.dashboard-formula-link h2 {
  margin: 0 0 6px;
  font-family: var(--theme-serif);
  font-size: 1.2rem;
  font-weight: 400;
}

.dashboard-formula-link p {
  margin: 0;
  color: var(--dashboard-muted);
}

/* Calm surfaces: separate areas by tone, not outlines.
   Sidebar, top bar, cards and search sit on slightly lighter greys; hover lifts one step. */
.dashboard-page {
  --dashboard-surface-3: #2c2c30;
}

.dashboard-sidebar,
.dashboard-topbar,
.dashboard-sidebar__brand,
.dashboard-sidebar__footer,
.dashboard-footer {
  border-color: transparent;
}

.dashboard-search input {
  border-color: transparent;
  background: var(--dashboard-surface-2);
}

.dashboard-search input:focus {
  border-color: transparent;
  box-shadow: var(--focus);
}

.dashboard-search__results {
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.dashboard-card,
.dashboard-about,
.dashboard-card__head,
.dashboard-formula-link {
  border-color: transparent;
  background: var(--dashboard-surface);
}

.dashboard-formula-link {
  transition: background 0.15s;
}

.dashboard-formula-link:hover,
.dashboard-formula-link:focus-visible {
  border-color: transparent;
  background: var(--dashboard-surface-2);
}

.dashboard-formula-link:hover h2 {
  color: var(--dashboard-accent);
}

.dashboard-disclaimer {
  border-color: transparent;
}

.dashboard-btn--ghost {
  border-color: transparent;
  background: var(--dashboard-surface-2);
}

.dashboard-btn--ghost:hover {
  border-color: transparent;
  background: var(--dashboard-surface-3);
}