@font-face {
  font-family: "Literata Local";
  src: url("../fonts/literata-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Literata Local";
  src: url("../fonts/literata-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Ysabeau Office Local";
  src: url("../fonts/ysabeau-office.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Ysabeau Office Local";
  src: url("../fonts/ysabeau-office-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --color-primary: #5b748c;
  --color-primary-strong: #465f76;
  --color-primary-soft: #d8e3ec;
  --color-accent: #c9785c;
  --color-accent-strong: #b96b50;
  --color-accent-soft: #f3ddd4;
  --color-surface: #f4efe7;
  --color-surface-strong: #e4ebf1;
  --color-surface-card: rgba(251, 246, 239, 0.84);
  --color-surface-card-strong: #fbf6ef;
  --color-surface-card-soft: rgba(251, 246, 239, 0.76);
  --color-text: #263646;
  --color-text-soft: #5d6d7d;
  --color-border: rgba(70, 95, 118, 0.14);
  --color-success: #476f63;
  --color-error: #a24835;
  --color-shadow: rgba(36, 46, 61, 0.16);
  --gradient-hero:
    radial-gradient(circle at 12% 16%, rgba(201, 120, 92, 0.18), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(91, 116, 140, 0.24), transparent 28%),
    radial-gradient(circle at 62% 74%, rgba(216, 227, 236, 0.72), transparent 34%),
    linear-gradient(180deg, rgba(244, 239, 231, 0.96), rgba(236, 242, 247, 0.98));
  --gradient-band:
    linear-gradient(135deg, rgba(91, 116, 140, 0.08), rgba(201, 120, 92, 0.06));

  --font-heading: "Literata Local", Georgia, serif;
  --font-body: "Ysabeau Office Local", "Trebuchet MS", sans-serif;

  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 0.875rem;
  --space-md: 1.25rem;
  --space-lg: 1.75rem;
  --space-xl: 2.5rem;
  --space-2xl: clamp(3rem, 5vw, 4.5rem);
  --space-3xl: clamp(4rem, 7vw, 6.5rem);

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 0;

  --shadow-sm: 0 12px 30px -18px var(--color-shadow);
  --shadow-md: 0 24px 60px -32px var(--color-shadow);

  --container-sm: 48rem;
  --container-md: 70rem;
  --container-lg: 78rem;

  --transition-fast: 180ms ease;
  --transition-base: 280ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms linear;
    --transition-base: 0ms linear;
  }
}