/* Milanko brand manual v1.2 — the hand-written part of the skin (docs/17, DESIGN.md).
   Load order: styles.css → brand-map.css (generated colour, radius, shadow and weight swap) → this file.
   Prisma: a neutral desk, white surfaces with a 1px border and a soft shadow, IBM Plex Sans for the interface,
   Source Serif 4 for long reading, JetBrains Mono for telemetry, brand blue for the one primary action. */
:root {
  --serif: "IBM Plex Sans", "Inter", ui-sans-serif, system-ui, sans-serif;   /* headings: Plex 600 */
  --sans: "IBM Plex Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --reading: "Source Serif 4", "Source Serif Pro", Georgia, serif;           /* ledes and long reading */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --brand-50: #f0f5fe;
  --brand-400: #7a9feb;
  --brand: #4064c6;      /* brand-600, action-primary */
  --brand-700: #3550a3;
  --line-2: #c3cad5;     /* border-strong */
  --node: #c2410c;       /* the logo's anomaly node on light */
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --ease-emph: cubic-bezier(0.3, 0, 0, 1);
  scrollbar-color: #c3cad5 transparent;
}
/* Dark theme, per the manual: the node turns anomaly-400 and the strong border darkens. */
:root[data-theme="dark"] { --node: #ff8a4c; --line-2: #3b4350; --brand-50: #1a2440; scrollbar-color: #3b4350 transparent; }

/* Type: Plex 600 with a little negative tracking for headings; body at 400. */
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; font-synthesis: none; }
h1, h2, h3 { font-weight: 600; }
h1 { letter-spacing: -0.025em; line-height: 1.08; }
h2 { letter-spacing: -0.015em; }
.lead, .prose p, .ask-verdict dd, .next-card__title { font-family: var(--reading); }
.lead { font-size: 19px; line-height: 1.55; }

/* Surfaces: white with a 1px border-default; the soft shadow comes from brand-map.css. */
.panel, .paper, .cta, .callout-box, .tbl-wrap, .board__col, .gx-drawer, .term-pop, .ask-verdict, .audit, .test, .station, .member, .empty { border: 1px solid var(--line); }

/* The one primary action is brand blue (it was navy). Hover goes to brand-700. */
.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (hover: hover) { .btn--primary:hover { background: var(--brand-700); border-color: var(--brand-700); } }

/* Night blocks are the manual's immersive bands: Deep Space, a hairline, no glow buttons. */
.block--night { background: var(--space); box-shadow: inset 0 0 0 1px var(--space-line); }
:root[data-theme="dark"] .block--night { background: #0d1014; box-shadow: inset 0 0 0 1px #282e37; }
.btn--glow { background: transparent; color: #f5f7fa; border: 1px solid rgba(195, 202, 213, 0.45); box-shadow: none; }
@media (hover: hover) { .btn--glow:hover { background: rgba(245, 247, 250, 0.08); border-color: #c3cad5; color: #fff; } }

/* Focus, per the manual: 2px brand outline, 2px offset. */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Stamps lie flat: Prisma does not tilt paper. */
.stamp { transform: none; border-width: 1.5px; border-radius: 6px; }

/* Logo: isotype in ink with its anomaly node; the logotype is drawn, not typed. */
.brand__mark { color: var(--ink); }
.brand__mark .node { fill: var(--node); }
.brand__logo { display: block; height: 15px; width: auto; color: var(--ink); }
.brand--m .brand__logo { height: 14px; }
.brand__text { gap: 6px; }

@media (forced-colors: active) { .brand__mark .node { fill: CanvasText; } }
@media (prefers-reduced-transparency: reduce) { .gx-drawer, .term-pop { backdrop-filter: none; } }