/* wearestudio810.com root site.
 *
 * Hand-maintained (unlike apps/poc/, which tools/poc-builder generates), but
 * every value below is copied verbatim from design/tokens/studio810/tokens.json
 * — the mirror of the published Figma variables. The drift gate enforces that:
 * a value here that the foundation does not publish fails the check, and so
 * does a value left stale after a token changes. Update this block only by
 * re-copying from the mirror after a Design-role sync.
 *
 * The former design-system gap here is closed: the foundation now publishes
 * studio810/type/family-display (Marcellus) and size-wordmark, measured from
 * the live site, and the wordmark uses them. */

:root {
  --border-focus-offset: 4px;
  --border-focus-ring: 2px;
  --border-hairline: 1px;
  --color-action-fill: #d4967d;
  --color-action-fill-disabled: #ddab97;
  --color-action-fill-hover: #ddab97;
  --color-action-fill-text: #ffffff;
  --color-action-inverse-fill: #ffffff;
  --color-action-inverse-fill-disabled: #f6eae5;
  --color-action-inverse-fill-hover: #f6eae5;
  --color-action-inverse-text: #d4967d;
  --color-border-focus: #303636;
  --color-border-focus-inverse: #ffffff;
  --color-surface-1: #495a58;
  --color-surface-2: #d4967d;
  --color-surface-3: #ffffff;
  --color-surface-4: #e5e3dc;
  --color-text-accent: #495a58;
  --color-text-ink: #303636;
  --color-text-inverse: #ffffff;
  --radius-control: 15px;
  --space-control-x: 35.2px;
  --space-control-y: 24px;
  --type-family-body: 'PT Serif';
  --type-family-display: 'Marcellus';
  --type-size-body: 16px;
  --type-size-h1: 66.4px;
  --type-size-h2: 46.24px;
  --type-size-h3: 36.16px;
  --type-size-h4: 26.08px;
  --type-size-hero: 232px;
  --type-size-wordmark: 24.4px;
  --type-weight-bold: 700;
  --type-weight-regular: 400;
}

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

body {
  font-family: var(--type-family-body), serif;
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-regular);
  background: var(--color-surface-1);
  color: var(--color-text-inverse);
  padding: var(--space-control-x);
}

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-control-y);
  max-width: 42rem;
}

.wordmark {
  font-family: var(--type-family-display), serif;
  font-size: var(--type-size-wordmark);
  font-weight: var(--type-weight-regular);
  letter-spacing: -0.02em; /* Brand/Wordmark text style: tracking -2% */
}

/* Button/Primary, State=Default — Figma set 13:3, variant node 1:5.
 * Same token bindings as apps/poc/. */
.btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  background: var(--color-action-fill);
  color: var(--color-action-fill-text);
  border-radius: var(--radius-control);
  padding: var(--space-control-y) var(--space-control-x);
  font-family: var(--type-family-body), serif;
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-regular);
}