:root {
    /* Palette */
    --color-black: #222222;
    --color-beige-light: #f7f6f2;
    --color-beige: #e7e6df;
    --color-white: #ffffff;
    --color-blue: #96b2ec;
    --color-grey: #a7a7a7;
    --color-red: #dd463c;
    --color-pink: #dd7495;
    --color-lilac: #e2b0d9;

    /* Semantic colors */
    --color-text: var(--color-black);
    --color-background: var(--color-beige);
    --color-background-light: var(--color-beige-light);
    --color-button-bg: var(--color-blue);
    --color-button-text: var(--color-black);
    --color-button-border: var(--color-black);
    --color-button-bg-hover: var(--color-beige);
    --color-muted: var(--color-grey);

    /* Font families */
    --font-geist: "Geist", Arial, sans-serif;
    --font-geist-mono: "GeistMono", "Courier New", monospace;

    /* Typography: desktop, 1200px+ */
    --font-h1-family: var(--font-geist);
    --font-h1-size: 30px;
    --font-h1-line-height: 1.1;

    --font-h2-family: var(--font-geist-mono);
    --font-h2-size: 22px;
    --font-h2-line-height: 1.2;

    --font-subtitle-family: var(--font-geist-mono);
    --font-subtitle-size: 17px;
    --font-subtitle-line-height: 1.4;

    --font-body-family: var(--font-geist);
    --font-body-size: 14px;
    --font-body-line-height: 1.6;

    --font-body-small-family: var(--font-geist);
    --font-body-small-size: 12px;
    --font-body-small-line-height: 1.6;

    --font-headline-family: var(--font-geist-mono);
    --font-headline-size: 18px;
    --font-headline-line-height: 1.2;

    --font-h1-big-family: var(--font-geist-mono);
    --font-h1-big-size: 38px;
    --font-h1-big-line-height: 1.1;

    --font-button-family: var(--font-geist-mono);
    --font-button-size: 12px;
    --font-button-line-height: 1;
  }

  /* Tablet: 640px - 1199px */
  @media (max-width: 1199px) {
    :root {
      --font-h1-size: 22px;
      --font-h2-size: 18px;
      --font-subtitle-size: 16px;
      --font-body-size: 12px;
      --font-body-small-size: 12px;
      --font-headline-size: 14px;
      --font-h1-big-size: 26px;
      --font-button-size: 12px;
    }
  }

  /* Mobile: 320px - 639px */
  @media (max-width: 639px) {
    :root {
      --font-h1-size: 20px;
      --font-h2-size: 16px;
      --font-subtitle-size: 13px;
      --font-body-size: 12px;
      --font-body-small-size: 10px;
      --font-headline-size: 14px;
      --font-h1-big-size: 16px;
      --font-button-size: 12px;
    }
  }