/*
 * Base Styles - Focus Indicators
 * --------------------------------------------------------------------------
 */

/* 
 * Provide a clear visual focus indicator for keyboard users.
 * :focus-visible is preferred as it typically only shows for keyboard focus,
 * not mouse clicks, providing a cleaner experience for mouse users.
 */
:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-white); /* Inner white line */
  transition: outline 0.1s ease-in-out, outline-offset 0.1s ease-in-out, box-shadow 0.1s ease-in-out; 
}

/* Fallback for browsers that don't support :focus-visible (less common now) */
/* You might want to be more specific here if this causes issues with certain elements */
/* 
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 1px;
} 
*/

/* 
 * Optional: Remove default outline for elements when :focus-visible is supported,
 * to avoid double outlines if you also have a basic :focus style.
 */
:focus:not(:focus-visible) {
  outline: none;
}

/* --- Body Base --- */
body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-background-body);
  -webkit-font-smoothing: antialiased; /* Improve font rendering on WebKit */
  -moz-osx-font-smoothing: grayscale; /* Improve font rendering on Firefox */
}

/* Improved heading scale */
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary); /* Use Oswald for headings */
  font-weight: 600; /* Oswald was loaded with 600 weight */
  line-height: var(--line-height-heading);
  color: var(--color-text-primary); /* Default heading color */
  margin-top: 0; /* Remove default top margin */
  margin-bottom: var(--space-md); /* Consistent bottom margin */
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold); /* Often bolder */
}

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

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium); /* Often less bold */
}

h6 {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-medium); /* Often less bold */
  color: var(--color-text-secondary); /* Often less prominent */
}

/* Example: Link color for headings if they are links */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit; /* Inherit heading color */
  text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  text-decoration: underline;
  color: var(--color-text-link); /* Or inherit */
}