@font-face {
  font-family: "Sundayable Display";
  src: url("fonts/gabarito-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sundayable Display";
  src: url("fonts/gabarito-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sundayable Text";
  src: url("fonts/figtree-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sundayable Text";
  src: url("fonts/figtree-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sundayable Mono";
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour */
  --sundayable-butter: #ffffeb;
  --sundayable-card: #fffff6;
  --sundayable-ink: #1b2233;
  --sundayable-night: #0a0f1e;
  --sundayable-body: #45422f;
  --sundayable-muted: #7c7761;
  --sundayable-line: #e2dcc6;
  --sundayable-horizon: #82bce2;
  --sundayable-approved: #3e7c4f;

  /* Typography */
  --sundayable-font-display: "Sundayable Display", ui-sans-serif, system-ui, sans-serif;
  --sundayable-font-text: "Sundayable Text", ui-sans-serif, system-ui, sans-serif;
  --sundayable-font-mono: "Sundayable Mono", ui-monospace, monospace;
  --sundayable-display-leading: 1.03;
  --sundayable-body-leading: 1.65;
  --sundayable-display-tracking: -0.025em;

  /* Shape */
  --sundayable-radius-ui: 12px;
  --sundayable-radius-card: 18px;
  --sundayable-radius-media: 22px;
  --sundayable-radius-pill: 999px;
  --sundayable-border: 2px solid var(--sundayable-ink);
  --sundayable-offset: 4px 4px 0 var(--sundayable-ink);

  /* Motion */
  --sundayable-motion-fast: 250ms;
  --sundayable-motion-base: 450ms;
  --sundayable-motion-scene: 1100ms;
  --sundayable-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

.sundayable-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  color: var(--sundayable-butter);
  background: var(--sundayable-ink);
  border: var(--sundayable-border);
  border-radius: var(--sundayable-radius-pill);
  box-shadow: 3px 3px 0 rgba(27, 34, 51, 0.2);
  font-family: var(--sundayable-font-display);
  font-weight: 600;
  text-decoration: none;
}

.sundayable-card {
  padding: 26px;
  color: var(--sundayable-body);
  background: var(--sundayable-card);
  border: var(--sundayable-border);
  border-radius: var(--sundayable-radius-card);
  box-shadow: var(--sundayable-offset);
  font-family: var(--sundayable-font-text);
}

.sundayable-label {
  color: var(--sundayable-muted);
  font-family: var(--sundayable-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}