/* Shared shell. Everything else stays as inline style attributes, exactly as
   the design export wrote them — this file exists only for what cannot be
   expressed inline: font faces, pseudo-classes, media queries. */

@font-face { font-family: Spectral; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/spectral-300.woff2') format('woff2'); }
@font-face { font-family: Spectral; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/spectral-400.woff2') format('woff2'); }
@font-face { font-family: Spectral; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/spectral-400i.woff2') format('woff2'); }
@font-face { font-family: Spectral; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/spectral-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-tight-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-tight-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-tight-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex-mono-500.woff2') format('woff2'); }

:root {
  --ink: #F2EFE9;
  --paper: #141210;
  --rubric: #D4483F;
  --muted: #928B81;
  --rule: rgba(242, 239, 233, .15);
  --surface: #1C1917;
  --sunk: rgba(242, 239, 233, .035);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #141210; scroll-behavior: smooth; }
:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Inter Tight', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration-color: var(--rubric); text-underline-offset: 3px; }
a:hover { color: var(--rubric); }
input::placeholder { color: #6E675E; opacity: 1; }
::selection { background: var(--rubric); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .001ms !important; }
}

/* The export expressed hover and focus through a style-hover / style-focus
   attribute its runtime interpreted. Static markup needs real selectors. */
[data-hover-invert]:hover { background: var(--ink); color: var(--paper); }
[data-hover-ink]:hover { color: var(--ink); }
[data-hover-border]:hover { border-color: var(--ink); }
input[data-focus-rubric]:focus { border-bottom-color: var(--rubric); }