/* FinOpsRelay theme — aligns the product pages with the main Diablo site palette (see /styles/style.css).
   Loaded after each page's inline <style>, so these values win. Scope colors (blue/purple/amber/teal/pink)
   and the crest are product semantics and are intentionally left alone. */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/playfair-display-700.woff2") format("woff2");
}

:root {
  --bg: #f7f3ed;
  --panel: #ffffff;
  --ink: #1c1c1e;
  --muted: #6b6b6b;
  --line: #e6d8c4;
  --wash: #f0e7d9;
  --navy: #9e1f1f;          /* brand primary (oxblood): buttons, dark panels */
  --orange: #b97a43;        /* brand secondary (terracotta): fills and rules */
  --orange-ink: #8a5a2e;    /* text-safe terracotta */
  --accent: #8a5a2e;
  --code: #1f1b1c;
  --codeink: #eeeeee;
  --display: "Playfair Display", "Source Serif Pro", Georgia, serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
}

body { font-family: var(--body); color: var(--ink); background: var(--bg); }
h1, h2, h3 { font-family: var(--display); font-stretch: 100%; font-weight: 700; letter-spacing: 0; }
h1 { line-height: 1.08; }
.hero h1 { font-size: clamp(36px, 6vw, 72px); max-width: 16ch; line-height: 1.05; letter-spacing: 0; }

/* Site nav */
.sn { background: #fff; border-bottom: 1px solid var(--line); font-family: var(--body); }
.sn-brand { font-family: var(--display); color: var(--ink); }
.sn-links a { color: var(--muted); border-radius: 4px; }
.sn-links a:hover { color: var(--ink); background: var(--wash); }
.sn-links a[aria-current="page"] { color: var(--navy); background: var(--wash); box-shadow: inset 0 -2px 0 var(--orange); }
.sn-cta { background: var(--navy); border-radius: 4px; box-shadow: inset 0 -3px 0 var(--orange); }
.sn a:focus-visible { outline-color: var(--orange); }

/* Dark panels and code */
.margin, .vision { background: var(--code); color: #eeeeee; }
.vision { background: var(--navy); }
.margin p { color: #cfc6bb; }
.vision p { color: #f1dede; }
.eq { border-color: #3a3233; }
.eq b { color: #e3c29f; }
.margin .eb, .eq em { color: #e0a96f; }

/* Corners: main site uses small radii */
.btn, .cmd, .chip { border-radius: 4px; }
.frame, .margin, .vision { border-radius: 6px; }

/* Footer brand link */
.ft-brand a { color: inherit; }