@import "reset.css";
@import "header.css";
@import "footer.css";

.dm-serif-display-regular {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}

.noto-sans {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

:root {
  /* Colors — primitives */
  --blue: oklch(15.6% 0.0571 257.73deg);
  --blue2: oklch(0.455 0.129 250.8); /* 045F9B */
  --grey: oklch(0.325 0 0);
  --grey2: oklch(0.217 0.051 241.5);
  --linen: oklch(0.945 0.007 97.4); /* #EEED#8 */
  --white: oklch(1 0 0);
  --yellow: oklch(0.899 0.186 97.9); /* #FFDD00 */
  --yellow2: oklch(0.789 0.162 84.6 / 0.2); /* #EAB000 */

  /* Colors — semantic */
  --color-accent: var(--yellow);
  --color-accent2: var(--yellow2);
  --color-background: var(--blue);
  --color-background-alt: var(--linen);
  --color-text: var(--grey2);
  --color-text-alt: var(--white);
  --color-text-accent: var(--blue2);

  --header-height: 6rem;
  --layout-max-width: 60rem;

  --padding-inline: calc(1rem + 1vw);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12);

  /* Spacing scale (8px system) */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 0.75rem; /* 12px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */
  --space-3xl: 4rem; /* 64px */
  --space-4xl: 4.5rem;
  --space-5xl: 5rem; /* 80px */
  --space-8xl: 8rem; /* 128px */

  /* Font sizes */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-md: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 2rem; /* 32px */
  --text-3xl: 3rem; /* 48px */
  --text-4xl: 4rem; /* 64px */
  --text-5xl: 4rem; /* 48px */

  --h1-font-size: clamp(1.75rem, 3vw + 1rem, 4rem);
}

html {
  overflow-x: clip;
  scroll-padding-top: var(--header-height);
}

body {
  background-color: white;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans", "Trebuchet MS", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  gap: 0;
  min-height: 100dvh;
  overflow-x: clip;
}

:is(body > header, body > footer, main, #home > section) {
  margin: 0 auto;
  max-width: var(--layout-max-width);
  width: 100%;
}

a:not(.link) {
  text-decoration: none;
}

nav > ul {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: var(--space-md);
  list-style: none;
}

ul li p {
  display: inline;
}

em {
  font-style: normal;
  font-weight: 600;
}

main {
  flex: 1;
  padding-block: var(--space-3xl);

  h1 {
    font-family: "Antonio", sans-serif;
    font-size: var(--h1-font-size);
    text-align: left;
    text-transform: uppercase;
  }
}

.prose > * + *,
.prose > section > * + * {
  margin-block-start: var(--prose-flow, 2em);
}

article,
.card {
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  container-type: inline-size;
  display: grid;
  gap: 1rem;
  padding-block: calc(1rem + 1vw);
  padding-inline: var(--space-lg);

  header {
    font-size: var(--text-xl);
    font-weight: 600;
  }

  a,
  button {
    text-decoration: none;

    img {
      color: var(--color-text);
      display: inline;
      height: 1.25rem;
      margin-left: 0.25rem;
      position: relative;
      top: 0.35rem;
      width: 1.25rem;
    }
  }
}

div.cta {
  align-items: center;
  background-color: transparent;
  display: flex;
  justify-content: center;

  .cta {
    background-color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 0;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    margin-block: var(--space-xl) var(--space-2xl);
    padding-block: 1rem;
    padding-inline: 2rem;
    text-transform: uppercase;
  }
}