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

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-900.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("../fonts/noto-sans-sc-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("../fonts/noto-sans-sc-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --island-sky: #8bd5f5;
  --island-grass: #79c76d;
  --island-accent: #62c7be;
  --island-focus: #174f4c;
  --island-link: #1c6763;
  --island-sand: #f4e6a8;
  --island-wood: #76533c;
  --island-ink: #51473b;
  --island-paper: #fffdf1;
  --island-line: rgba(81, 71, 59, 0.18);

  --island-card-radius: 20px;
  --island-input-radius: 16px;
  --island-pill-radius: 999px;
  --island-shadow: 0 8px 0 rgba(118, 83, 60, 0.18);
  --island-shell: min(1240px, calc(100% - 48px));

  --island-display: "Nunito", "Noto Sans SC", sans-serif;
  --island-body: "Noto Sans SC", sans-serif;
  --island-type-hero: clamp(2.5rem, 6vw, 5.25rem);
  --island-type-title: clamp(2rem, 4vw, 3.5rem);
  --island-type-heading: clamp(1.5rem, 2.4vw, 2.25rem);
  --island-type-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --island-type-small: 0.875rem;
  --island-leading-display: 1.05;
  --island-leading-body: 1.75;

  --scene-sky: #8bd5f5;
  --scene-light: #fff5b2;
  --scene-sea: #62c7be;
  color-scheme: light;
}

html[data-period="dawn"] {
  --scene-sky: #f6bd9d;
  --scene-light: #fff0c2;
  --scene-sea: #79c9c4;
}

html[data-period="day"] {
  --scene-sky: #8bd5f5;
  --scene-light: #fff5b2;
  --scene-sea: #62c7be;
}

html[data-period="dusk"] {
  --scene-sky: #d99bb8;
  --scene-light: #ffd39a;
  --scene-sea: #5aa5aa;
}

html[data-period="night"] {
  --scene-sky: #263b62;
  --scene-light: #f5edb9;
  --scene-sea: #315f76;
  color-scheme: dark;
}