/* ============================================================
   AskRami warm-dark editorial theme — house override sheet.
   Canon palette: /tokens.css (Trilot house tokens), linked
   FIRST in every head. This sheet loads AFTER Tailwind and
   /assets/css/site.css and routes the site's local custom
   properties onto the canon tokens, then carries the shared
   element rules (body, headings, links, forms, alerts).
   ============================================================ */

/* ---- palette: site vars → canon tokens ---- */
:root {
  --bg: var(--dark-bg);
  --surface: var(--dark-surface);
  --surface-2: var(--dark-surface-2);
  --border: var(--dark-rule);
  --border-strong: color-mix(in srgb, var(--gold-2) 45%, transparent);
  --text: var(--dark-text);
  --muted: var(--dark-text-muted);
  --accent: var(--gold-2);
  --accent-soft: color-mix(in srgb, var(--gold-2) 12%, transparent);
  --success: var(--sage);
  --danger: var(--dark-rust);
}

/* ---- body ---- */
body {
  background: var(--dark-bg);
  color: var(--dark-text);
  font-family: var(--font-body);
}

/* ---- headings + hero display: editorial serif, weight 400 ----
   !important is needed to out-rank Tailwind font-weight utilities
   (font-bold / font-semibold) sitting directly on h1/h2 elements. */
h1, h2,
.display, .display-tight {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}

/* ---- links: rust at rest, underline (solid rule) on hover ---- */
.link {
  color: var(--dark-rust);
  border-bottom: 1px dashed color-mix(in srgb, var(--dark-rust) 45%, transparent);
}
.link:hover {
  color: var(--dark-rust);
  border-bottom-style: solid;
  border-bottom-color: var(--dark-rust);
}
.prose-askrami a {
  color: var(--dark-rust);
  border-bottom: 1px solid color-mix(in srgb, var(--dark-rust) 40%, transparent);
}
.prose-askrami a:hover { border-bottom-color: var(--dark-rust); }
.prose-askrami blockquote { border-left-color: var(--gold-2); }

/* ---- forms: fields on the elevated surface, gold focus ---- */
.input, .select, .textarea {
  background: var(--dark-surface-2);
  border-color: var(--dark-rule);
  color: var(--dark-text);
}
.input::placeholder, .textarea::placeholder { color: var(--dark-text-muted); }
.input:focus, .select:focus, .textarea:focus {
  border-color: color-mix(in srgb, var(--gold-2) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-2) 10%, transparent);
}

/* ---- buttons: gold fill, ink text, deep-gold hover ---- */
.btn-primary { background: var(--gold-2); color: var(--ink); }
.btn-primary:hover:not(:disabled) {
  background: var(--gold-3);
  color: var(--ink);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--gold-2) 55%, transparent);
}
.btn-secondary:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--gold-2) 40%, transparent);
  background: var(--dark-surface-2);
}
.btn-danger {
  color: var(--dark-rust);
  border-color: color-mix(in srgb, var(--dark-rust) 40%, transparent);
}
.btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--dark-rust) 8%, transparent);
}

/* ---- alerts + toasts: rust errors, sage success ---- */
.toast {
  background: var(--dark-surface);
  border-color: var(--dark-rule);
}

/* ---- the badge/seal: antique-gold ramp, ink type ---- */
.avatar {
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2), var(--gold-3));
  color: var(--ink);
}

/* ---- selection ---- */
::selection {
  background: color-mix(in srgb, var(--gold-2) 35%, transparent);
  color: var(--dark-text);
}