/* website/static/css/components/headers.css */

/* ------------------------------------------------------------
   GLOBAL HEADER SYSTEM (Theme-Aware + Unified Typography)
   website/static/css/components/headers.css
------------------------------------------------------------
   PURPOSE:
   A clean, theme-aware header system that ensures consistent
   typography across the entire application. Supports:
   ✓ Base headers (h1–h6)
   ✓ Filled variant
   ✓ Outline variant
   ✓ Glow variant

   GOALS:
   - Zero hardcoded colors
   - 100% variable-driven
   - Smooth transitions
   - Perfect alignment with global variables + themes
------------------------------------------------------------ */


/* ============================================================
   1) BASE HEADER STYLE
============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-base);
  font-weight: 700;
  margin: 0.6rem 0;

  /* Theme-aware header color */
  color: var(--color-header, var(--color-accent));

  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}



/* ============================================================
   2) FILLED VARIANT
   Solid background using theme header color.
============================================================ */
.header-filled {
  display: inline-block;

  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-small);

  background: var(--color-header);
  color: var(--color-dark);
}



/* ============================================================
   3) OUTLINE VARIANT
   Transparent background with header-colored border.
============================================================ */
.header-outline {
  display: inline-block;

  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-small);

  border: 2px solid var(--color-header);
  color: var(--color-header);
  background: transparent;
}



/* ============================================================
   4) GLOW VARIANT
   Premium glowing header for emphasis.
============================================================ */
.header-glow {
  display: inline-block;

  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-small);

  background: var(--color-header);
  color: var(--color-dark);

  box-shadow: 0 0 12px var(--color-header);
}