/* Generated by tools/poc-builder from design/tokens/focx/tokens.json.
 * Do not edit by hand — regenerate instead. Every value below resolves to a
 * published Figma variable (docs/drift-gate.md). */

:root {
  --action-fill-hover: #222222;
  --action-fill-text: #fcfcfc;
  --action-fill: #050505;
  --border-focus-ring: 2px;
  --border-focus: #050505;
  --control-h-lg: 44px;
  --control-h-md: 34px;
  --control-px-lg: 18px;
  --control-px-md: 14px;
  --font-display: 'The Fox Tail';
  --font-sans: 'Geist';
  --radius-pill: 999px;
  --space-3: 6px;
  --surface-1: #f9f9f9;
  --surface-inverse: #050505;
  --text-brand-eyebrow: 12px;
  --text-brand-hero: 64px;
  --text-label: 13px;
  --text-subheading: 17px;
  --weight-medium: 500;
  --weight-regular: 400;
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: var(--font-sans), system-ui, sans-serif;
  background: var(--surface-1);
  color: var(--surface-inverse);
}

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--control-px-lg);
  padding: var(--control-h-lg);
}

.eyebrow {
  font-size: var(--text-brand-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--text-brand-eyebrow);
  text-transform: uppercase;
}

.wordmark {
  font-family: var(--font-display), ui-serif, Georgia, serif;
  font-size: var(--text-brand-hero);
  font-weight: var(--weight-regular);
  line-height: 0.98;
}

.subheading {
  font-size: var(--text-subheading);
  font-weight: var(--weight-medium);
  line-height: 1.35;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-weight: var(--weight-medium);
  color: var(--action-fill-text);
}

.btn--md { height: var(--control-h-md); padding: 0 var(--control-px-md); font-size: var(--text-label); }
.btn--pill { border-radius: var(--radius-pill); }

/* Button/Primary */
.btn--primary { background: var(--action-fill); }
.btn--primary:hover { background: var(--action-fill-hover); }

.btn:focus-visible {
  outline: var(--border-focus-ring) solid var(--border-focus);
  outline-offset: var(--border-focus-ring);
}