/* KRYONOM base: fonts, reset, typography roles. Tokens come from tokens.css (generated from src/brand/tokens.ts). */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: block;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-VF.ttf') format('truetype');
  font-weight: 100 800;
  font-display: block;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--c-bg);
  color: var(--c-ivory);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-variant-numeric: tabular-nums;
}

body {
  background:
    radial-gradient(ellipse 80% 70% at 50% 42%, rgba(74, 33, 67, 0.34), rgba(27, 7, 24, 0) 70%),
    linear-gradient(rgba(244, 240, 228, 0.028) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(244, 240, 228, 0.028) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--c-bg);
  min-height: 100%;
}

button { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible { outline: 1.5px solid var(--c-lime); outline-offset: 2px; }

/* Typography roles (film-105 MODULE_GUIDE §5) */
.t-display {
  font-family: var(--font-display);
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.t-caption {
  font-family: var(--font-display);
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 600;
  font-size: 9.5px;
  color: rgba(244, 240, 228, 0.5);
}
.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.t-dim { color: rgba(244, 240, 228, 0.55); }
.t-faint { color: rgba(244, 240, 228, 0.38); }

.c-lime { color: var(--c-lime); }
.c-gold { color: var(--c-gold); }
.c-rose { color: var(--c-rose); }
.c-cyan { color: var(--c-cyan); }

.font-warm { position: absolute; left: -9999px; top: 0; visibility: hidden; }
.font-warm .w1 { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; }
.font-warm .w2 { font-family: var(--font-ui); font-weight: 400; }
.font-warm .w3 { font-family: var(--font-mono); font-weight: 500; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}