/* Empire shared design tokens (F7488). Extracted from the CoHostBnB site (cohostbnb.xyz, Layout.C6z8TVv_.css,
   cohostbnb-site 9936a42) and the AnswerBeacon redesign (F7447 DESIGN_SYSTEM.md). System fonts only, no downloads.
   Reuse: <link rel="stylesheet" href="/assets/empire-tokens.css"> then build components on the semantic layer. */
:root {
  /* primitives */
  --paper: #fafaf9;
  --white: #ffffff;
  --mint-50: #f0f7f5;
  --mint-100: #e8f4f2;
  --sage-200: #b3d6c5;
  --sage-400: #7fb89e;
  --green-600: #2f7d56;
  --teal-700: #126d67;
  --teal-800: #155a56;
  --teal-link: #0c706a;
  --forest-800: #1c4a34;
  --forest-900: #143527;
  --ink-900: #17243b;
  --ink-950: #0a0e14;
  --ink-600: #43536a;
  --gray-500: #6b7280;
  --gray-300: #d1d5db;
  --line: #dbe3eb;
  --amber-300: #e8b769;
  --danger-600: #b42318;
  --danger-50: #fef3f2;
  --ok-50: #ecfdf3;
  --ok-700: #067647;

  /* semantic */
  --color-bg: var(--paper);
  --color-surface: var(--white);
  --color-band: var(--mint-50);
  --color-ink: var(--ink-900);
  --color-muted: var(--ink-600);
  --color-border: var(--line);
  --color-link: var(--teal-link);
  --color-eyebrow: var(--teal-link);
  --color-primary: var(--teal-700);
  --color-primary-hover: var(--teal-800);
  --color-on-primary: #ffffff;
  --color-secondary: var(--mint-100);
  --color-on-secondary: var(--teal-800);
  --color-accent: var(--amber-300);
  --color-footer: var(--forest-900);
  --color-on-footer: #e6efe9;
  --color-danger: var(--danger-600);
  --color-danger-bg: var(--danger-50);
  --color-ok: var(--ok-700);
  --color-ok-bg: var(--ok-50);
  --focus-ring: 0 0 0 3px rgba(18, 109, 103, .35);

  /* typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --text-hero: clamp(2.2rem, 5vw, 4.3rem);
  --lh-hero: 1.08;
  --weight-hero: 650;
  --tracking-hero: -.03em;
  --text-h2: 2rem;
  --text-h3: 1.2rem;
  --text-body: 1rem;
  --lh-body: 1.75;
  --text-small: .875rem;
  --text-eyebrow: .8rem;
  --tracking-eyebrow: .1em;

  /* spacing (4px base) */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;

  /* layout + shape */
  --max-page: 1120px;
  --section-pad: 64px 24px;
  --radius-button: 8px;
  --radius-card: 16px;
  --radius-band: 24px;
  --button-pad: 12px 20px;
  --card-pad: 24px;
  --grid-gap: 20px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-raise: 0 8px 24px rgba(16, 24, 40, .08);
}