/* --- 1. PERFECT FOURTH VARIABLES (Based on 1.333) --- */
:root {
  /* This ensures the entire scale can be changed by adjusting this one value */
  --scale-ratio: 1.333; 
  --base-size: 1rem; /* 16px */

  /* Calculated Font Sizes */
  --fs-xs: calc(var(--base-size) / var(--scale-ratio)); /* ≈ 0.75rem (12px) */
  --fs-sm: var(--base-size); /* 1rem (16px) - Base Body Text */
  --fs-md: calc(var(--base-size) * var(--scale-ratio)); /* ≈ 1.333rem (21.3px) */
  --fs-lg: calc(var(--fs-md) * var(--scale-ratio)); /* ≈ 1.777rem (28.4px) */
  --fs-xl: calc(var(--fs-lg) * var(--scale-ratio)); /* ≈ 2.368rem (37.9px) */
  --fs-xxl: calc(var(--fs-xl) * var(--scale-ratio)); /* ≈ 3.156rem (50.5px) */
  --fs-3xl: calc(var(--fs-xxl) * var(--scale-ratio));
  --fs-4xl: calc(var(--fs-3xl) * var(--scale-ratio));
  
  /* BRAND COLORS */
  --color-dark-blue: hsl(204, 100%, 15%);
  --color-teal: hsl(180, 100%, 25%);
    --color-orange: hsl(22, 100%, 65%);
    --color-red: hsl(5, 100%, 69%);

  /* ACCENT COLORS */
  --color-dark-blue-medium: hsl(204, 100%, 25%);
  --color-dark-blue-light: hsl(204, 100%, 35%);
  --color-dark-blue-lighter: hsl(204, 100%, 55%);
  --color-dark-blue-faint: hsl(204, 100%, 96%);

  --color-dark-teal-darker: hsl(180, 100%, 15%);
  --color-dark-teal-dark: hsl(180, 100%, 35%);
  --color-dark-teal-lighter: hsl(180, 100%, 55%);
  --color-dark-teal-faint: hsl(180, 100%, 96%);

  --color-dark-orange-darker: hsl(22, 100%, 15%);
  --color-dark-orange-dark: hsl(22, 100%, 35%);
  --color-dark-orange-lighter: hsl(22, 100%, 55%);
  --color-dark-orange-faint: hsl(22, 100%, 96%);

  --color-dark-red-darker: hsl(5, 100%, 15%);
  --color-dark-red-dark: hsl(5, 100%, 35%);
  --color-dark-red-lighter: hsl(5, 100%, 55%);
  --color-dark-red-faint: hsl(5, 100%, 96%);
  
  /* Neutral Colors */
  --color-soft-gray: hsl(206, 22%, 97%);
  --color-soft-gray-dark: hsl(200, 2%, 90%);

}

body {
  font-family: "Inter", sans-serif;
  font-size: var(--fs-sm); /* 1rem (16px) */ 
  line-height: 1.5;
  color: var(--color-dark-blue);
}

h1 {
  /* Replaces your 20px with the top of the scale (≈ 50.5px) */
  font-size: var(--fs-xxl); 
}

h2 {
  /* Replaces your 90px with the next level down (≈ 37.9px) */
  font-size: var(--fs-xl); 
}

h3 {
  /* Replaces your 24px with the next level down (≈ 28.4px) */
  font-size: var(--fs-lg); 
}

/* Optional: Adding the rest of the headings for completeness */
h4 {
  font-size: var(--fs-md); /* ≈ 21.3px */
}

h5 {
  font-size: var(--fs-sm); /* 16px */
}

h6 {
  font-size: var(--fs-xs); /* ≈ 12px */
}

/* --- 5. PARAGRAPH STYLES (Your existing code) --- */

p {
  font-size: var(--fs-md);
  padding: 0.4rem 0;
}

ul, li {
  font-size: var(--fs-md);
}

a {
  font-weight: 600;
  text-decoration: none;
}

time {
  font-size: var(--fs-xs);
}

[class*="currency"] {
    font-style: italic;
    font-family: "Roboto Serif", serif;
    font-weight: 900;
}

hr {
  margin:0.2rem 0;
  width: 95%;
  border: none;
  height: 50px; 
  background-image: url('/static/img/atoms/SVG/hr-svg.svg');
  background-repeat: no-repeat;
  background-position: center;
  /* Ensure it doesn't overflow on small screens */
  background-size: contain;
}