/*
  Millwren splash site styles.
  Token layers follow the Millwren design system:
  primitives (hex) -> semantic (job) -> component (one part of one component).
  Components reference component tokens only.
*/

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Agenor Neue";
  src: url("/assets/fonts/AgenorNeue-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Primitive tokens (only layer that holds raw values) ---------- */
:root {
  --neutral-50: #fefdfb;
  --neutral-100: #f6f1e9;
  --neutral-150: #f0ebe0;
  --neutral-300: #d7cbb1;
  --neutral-400: #aa9d83;
  --neutral-600: #766c58;
  --neutral-800: #322d22;
  --neutral-850: #252118;
  --neutral-900: #1b1810;
  --neutral-950: #0e0b06;

  --brand-100: #ffeee5;
  --brand-200: #ffdac7;
  --brand-300: #ffbb95;
  --brand-400: #dd8551;
  --brand-500: #c5672a;
  --brand-600: #a85111;
  --brand-700: #8a4007;
  --brand-800: #6e3309;
  --brand-950: #361906;

  --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-title: "Agenor Neue", "Geist", "Inter", system-ui, sans-serif;

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --radius-lg: 16px;
  --radius-full: 999px;
}

/* ---------- Semantic tokens: light theme ---------- */
:root {
  color-scheme: light dark;
  --bg: var(--neutral-100);
  --border: var(--neutral-300);
  --border-subtle: var(--neutral-150);
  --text: var(--neutral-900);
  --text-muted: var(--neutral-600);
  --primary: var(--brand-600);
  --primary-hover: var(--brand-700);
  --on-primary: var(--neutral-50);
  --primary-subtle: var(--brand-100);
  --primary-text: var(--brand-700);
  --primary-text-hover: var(--brand-800);
  --focus-ring: var(--brand-500);
}

/* ---------- Semantic tokens: dark theme ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--neutral-950);
    --border: var(--neutral-800);
    --border-subtle: var(--neutral-850);
    --text: var(--neutral-100);
    --text-muted: var(--neutral-400);
    --primary: var(--brand-400);
    --primary-hover: var(--brand-300);
    --on-primary: var(--neutral-950);
    --primary-subtle: var(--brand-950);
    --primary-text: var(--brand-300);
    --primary-text-hover: var(--brand-200);
    --focus-ring: var(--brand-400);
  }
}

/* ---------- Component tokens ---------- */
:root {
  --app-bg: var(--bg);
  --app-text: var(--text);
  --app-text-muted: var(--text-muted);
  --app-accent: var(--primary);

  --button-primary-bg: var(--primary);
  --button-primary-bg-hover: var(--primary-hover);
  --button-primary-text: var(--on-primary);
  --button-focus-ring: var(--focus-ring);

  --badge-brand-bg: var(--primary-subtle);
  --badge-brand-text: var(--primary-text);

  --link-text: var(--primary-text);
  --link-text-hover: var(--primary-text-hover);

  --footer-border: var(--border);

  --table-border: var(--border-subtle);
  --table-header-text: var(--text-muted);
  --table-text: var(--text);
  --card-border: var(--border);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  border-top: 3px solid var(--app-accent);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link-text);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--link-text-hover);
}

:focus-visible {
  outline: 2px solid var(--button-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -48px;
  padding: var(--space-2) var(--space-3);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border-radius: var(--radius-full);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-3);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: var(--space-12) 0;
}

/* ---------- Splash ---------- */
.logo {
  width: 260px;
  margin-bottom: var(--space-12);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--badge-brand-bg);
  color: var(--badge-brand-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}

/* Titles use Agenor Neue Regular only: one weight, never bold, never numbers. */
h1 {
  margin: var(--space-4) 0 var(--space-4);
  font-family: var(--font-title);
  font-size: clamp(32px, 6vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-synthesis: none;
  text-wrap: balance;
}

.lede {
  margin: 0 0 var(--space-8);
  max-width: 52ch;
  color: var(--app-text-muted);
  font-size: 16px;
  line-height: 24px;
}

.button {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.button:hover {
  background: var(--button-primary-bg-hover);
  color: var(--button-primary-text);
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--footer-border);
  padding: var(--space-6) 0;
  color: var(--app-text-muted);
  font-size: 13px;
  line-height: 18px;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Text pages (privacy, 404) ---------- */
.prose {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.prose .logo {
  width: 180px;
  margin-bottom: var(--space-8);
}

.prose h1 {
  font-size: 34px;
  margin-top: 0;
}

.prose table {
  width: 100%;
  margin: var(--space-3) 0 var(--space-4);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
}

.prose th,
.prose td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--table-border);
  color: var(--table-text);
}

.prose th {
  color: var(--table-header-text);
  font-weight: 500;
}

.prose tr:last-child td {
  border-bottom: 0;
}

.prose li p {
  margin: 0 0 var(--space-2);
}

.table-wrap {
  overflow-x: auto;
}

.prose h2 {
  margin: var(--space-8) 0 var(--space-2);
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.prose p,
.prose li {
  font-size: 15px;
  line-height: 24px;
}

.prose p {
  margin: 0 0 var(--space-3);
}

.prose ul {
  margin: 0 0 var(--space-3);
  padding-left: 20px;
}

.prose em {
  font-style: normal;
  color: var(--app-text-muted);
}

.meta {
  color: var(--app-text-muted);
}

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

main.page {
  display: block;
  padding: 0;
}