/* Font Face Declarations */
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/cinzel-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/cinzel-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Body */
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-text-heading);
  line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

/* Links */
a {
  color: var(--color-accent);
  transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
  color: var(--color-accent-hover);
}

/* Focus */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Selection */
::selection {
  background-color: var(--color-accent);
  color: var(--color-bg-primary);
}

/* Paragraph spacing in content */
p + p {
  margin-top: var(--sp-md);
}

/* Blockquote */
blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--sp-lg);
  font-style: italic;
  color: var(--color-text-secondary);
  margin: var(--sp-lg) 0;
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--sp-2xl) 0;
}

/* Strong / emphasis */
strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
}

em {
  font-style: italic;
}

sup {
  font-size: 0.75em;
  vertical-align: super;
}