/* Fonts: self-hosted, SIL OFL (see fonts/OFL-*.txt) */
@font-face { font-family: "Sora"; src: url(fonts/sora-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sora"; src: url(fonts/sora-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Sora"; src: url(fonts/sora-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Sora"; src: url(fonts/sora-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(fonts/instrument-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(fonts/instrument-sans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(fonts/instrument-sans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(fonts/instrument-sans-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --night: #100F30;
  --void: #14144A;
  --card: #17164A;
  --raised: #1B1B5C;
  --lavender: #C9A0E8;
  --lavender-bright: #E8D4F8;
  --rim: #7C95FF;
  --mint: #7EE0B5;
  --amber: #F5C26B;
  --text: #EFEAFA;
  --muted: #A49FC3;
  /* From the Companion design system tokens (dark theme) */
  --faint: #8A85B0;
  --idle: #6F6A92;
  --outline: #4D4A7A;
  --needs-you: #F0A0C0;
  --needs-you-text: #F7B8D0;
  --card-border: rgba(255, 255, 255, .06);
  --hairline: rgba(201, 160, 232, .12);
  --accent-tint: rgba(201, 160, 232, .14);
  --accent-border: rgba(201, 160, 232, .35);
  --ghost-border: rgba(239, 234, 250, .14);
  --ghost-text: rgba(239, 234, 250, .85);
  --option-fill: rgba(239, 234, 250, .045);
  --option-border: rgba(239, 234, 250, .07);
  --letter-rest: #3B3B8F;
  --font-head: "Sora", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--night); color: var(--text); font: 16px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-head); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(32px, 6vw, 56px); font-weight: 700; }
h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--lavender); }
img { max-width: 100%; height: auto; }
code, pre { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.section { padding: 88px 0; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.muted { color: var(--muted); }
.card { background: var(--card); border: 1px solid #2B2A78; border-radius: 14px; padding: 22px; }
.btn { display: inline-block; background: var(--lavender); color: var(--night); font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 10px; text-decoration: none; }
.btn:hover { background: var(--lavender-bright); }
.btn-link { display: inline-block; color: var(--lavender); font-weight: 500; font-size: 15px; padding: 11px 6px; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}