/* Apertura — design tokens (source: DESIGN.md) */
:root {
  /* Color */
  --color-text: #33203F;
  --color-primary: #BD6B53;
  --color-primary-hover: #A85940;
  --color-secondary: #D4A043;
  --color-secondary-hover: #BD8A31;
  --color-subhead: #40608F;
  --color-bg: #E9E6E0;
  --color-card: #F8F7F2;
  --color-border: rgba(51, 32, 63, 0.14);
  --color-border-strong: rgba(51, 32, 63, 0.24);
  --color-focus: #506E98;
  --color-primary-ink: color-mix(in srgb, var(--color-primary) 60%, var(--color-text) 40%);
  --color-secondary-ink: color-mix(in srgb, var(--color-secondary) 50%, var(--color-text) 50%);

  /* Type */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;

  /* Type scale — mobile-first base, overridden at md/lg */
  --text-h1: 2rem;
  --text-h2: 1.625rem;
  --text-h3: 1.25rem;
  --text-h4: 0.75rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-body-xs: 0.75rem;

  /* Spacing (8px base) */
  --space-0-5: 0.25rem;
  --space-1: 0.5rem;
  --space-1-5: 0.75rem;
  --space-2: 1rem;
  --space-2-5: 1.25rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-7: 3.5rem;
  --space-8: 4rem;

  /* Grid */
  --content-max: 1170px;
  --gutter: var(--space-2);
  --page-pad: var(--space-2);

  /* Shape */
  --radius-surface: 4px;
  --radius-control: 8px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur: 0.28s;
}

@media (min-width: 768px) {
  :root {
    --text-h1: 2.5625rem;
    --text-h2: 1.8125rem;
    --text-h3: 1.4375rem;
    --text-h4: 0.8125rem;
    --page-pad: var(--space-3);
  }
}

@media (min-width: 980px) {
  :root {
    --text-h1: 3.25rem;
    --text-h2: 2.25rem;
    --text-h3: 1.625rem;
    --text-h4: 0.875rem;
    --text-body-lg: 1.25rem;
    --page-pad: var(--space-4);
  }
}