/* main.css — generated by wp-builder; safe to edit BELOW the alias block. */

/* >>> aliases: managed — generated from aliases.json. Do not edit manually. */
:root {
  --brand-primary:       var(--theme-palette-color-1);
  --brand-primary-hover: var(--theme-palette-color-2);
  --color-text:          var(--theme-palette-color-3);
  --color-heading:       var(--theme-palette-color-4);
  --color-border:        var(--theme-palette-color-5);
  --bg-subtle:           var(--theme-palette-color-6);
  --bg-page:             var(--theme-palette-color-7);
  --bg-header:           var(--theme-palette-color-8);
}
/* <<< aliases */

:root {
  /* tokens Blocksy doesn't own — safe to edit here */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

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

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* base typography */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--color-heading);
}

/* example components — replace with your own */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}

.btn--primary {
  background: var(--brand-primary);
  color: #fff;
}

.btn--primary:hover {
  background: var(--brand-primary-hover);
}