/* ===============================
   Design Tokens: Colors & Fonts
   =============================== */

:root {
  /* ===============================
     Color Palette
     =============================== */

  /* Background */
  --color-bg-dark: #212121;
  --color-bg-navy: #051C2C;
  --color-bg-gray: #ACB2B9;
  --color-bg-light: #FFFFFF;

  /* Text */
  --color-text-primary: #212121;
  --color-text-secondary: #051C2C;
  --color-text-invert: #FFFFFF;

  /* Accent */
  --color-accent-dark: #051C2C;
  --color-accent-gold: #B89252;

  /* ===============================
     Font Family
     =============================== */

  --font-primary: 'Montserrat', sans-serif;

  /* H1 */
  --font-h1-size-desktop: 60px;
  --font-h1-size-tablet: 36px;
  --font-h1-size-mobile: 30px;
  --font-h1-line-height: 110%;
  --font-h1-letter-spacing: -0.05em;
  --font-h1-weight: 600;

  /* H2 */
  --font-h2-size-desktop: 30px;
  --font-h2-size-tablet: 24px;
  --font-h2-size-mobile: 24px;
  --font-h2-line-height: 140%;
  --font-h2-letter-spacing: -0.03em;
  --font-h2-weight: 600;

  /* Paragraph / T1 */
  --font-text-size-desktop: 18px;
  --font-text-size-tablet: 18px;
  --font-text-size-mobile: 18px;
  --font-text-size-mobile-small: 16px;
  --font-text-line-height: 140%;
  --font-text-letter-spacing: -0.03em;
  --font-text-weight: 500;

  /* Button */
  --font-button-size: 18px;
  --font-button-line-height: 140%;
  --font-button-letter-spacing: -0.02em;
  --font-button-weight: 700;

  /* H3 */
  --font-h3-size-desktop: 16px;
  --font-h3-line-height: 140%;
  --font-h3-letter-spacing: 0.03em;
  --font-h3-weight: 400;

  /* H4 */
  --font-h4-size-desktop: 14px;
  --font-h4-line-height: 140%;
  --font-h4-letter-spacing: 0.03em;
  --font-h4-weight: 400;
}

/* ===============================
   Base Styles
   =============================== */

body {
  font-family: var(--font-primary);
  font-size: var(--font-text-size-desktop);
  line-height: var(--font-text-line-height);
  letter-spacing: var(--font-text-letter-spacing);
  font-weight: var(--font-text-weight);
  color: var(--color-text-primary);
  background-color: var(--color-bg-light);
}

h1 {
  font-size: var(--font-h1-size-desktop);
  line-height: var(--font-h1-line-height);
  letter-spacing: var(--font-h1-letter-spacing);
  font-weight: var(--font-h1-weight);
  color: var(--color-text-primary);
}

h2 {
  font-size: var(--font-h2-size-desktop);
  line-height: var(--font-h2-line-height);
  letter-spacing: var(--font-h2-letter-spacing);
  font-weight: var(--font-h2-weight);
  color: var(--color-text-primary);
}

h3 {
  font-size: var(--font-h3-size-desktop);
  line-height: var(--font-h3-line-height);
  letter-spacing: var(--font-h3-letter-spacing);
  font-weight: var(--font-h3-weight);
  color: var(--color-text-secondary);
}

h4 {
  font-size: var(--font-h4-size-desktop);
  line-height: var(--font-h4-line-height);
  letter-spacing: var(--font-h4-letter-spacing);
  font-weight: var(--font-h4-weight);
  color: var(--color-text-secondary);
}

button {
  font-size: var(--font-button-size);
  line-height: var(--font-button-line-height);
  letter-spacing: var(--font-button-letter-spacing);
  font-weight: var(--font-button-weight);
  font-family: var(--font-primary);
  color: var(--color-text-invert);
  background-color: var(--color-accent-gold);
  border: none;
  cursor: pointer;
}

/* ===============================
   Responsive Typography
   =============================== */

@media (max-width: 1024px) {
  h1 {
    font-size: var(--font-h1-size-tablet);
  }

  h2 {
    font-size: var(--font-h2-size-tablet);
  }

  body {
    font-size: var(--font-text-size-tablet);
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: var(--font-h1-size-mobile);
  }

  h2 {
    font-size: var(--font-h2-size-mobile);
  }

  body {
    font-size: var(--font-text-size-mobile);
  }
}