/* =============================================================================
   ADEPR Church — Base styles, typography, utilities
   Layered on top of Bootstrap 5. Imports tokens.css.
   ============================================================================= */

/* ---------- Document ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--color-on-surface);
  background-color: var(--color-background);
  min-height: max(884px, 100dvh);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--color-secondary-container); color: var(--color-on-secondary-container); }

/* ---------- Typography scale ---------- */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

.text-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
  letter-spacing: var(--ls-h1);
}
.text-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
}
.text-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
}
.text-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--fw-body-lg);
}
.text-body-md {
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  font-weight: var(--fw-body-md);
}
.text-label-caps {
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  line-height: var(--lh-label-caps);
  letter-spacing: var(--ls-label-caps);
  font-weight: var(--fw-label-caps);
  text-transform: uppercase;
}

/* Responsive headline scaling */
@media (max-width: 768px) {
  .text-h1 { font-size: 36px; }
  .text-h2 { font-size: 28px; }
  .text-h3 { font-size: 22px; }
}

/* ---------- Color utilities (ADEPR palette extensions) ---------- */
.text-primary-adepr        { color: var(--color-primary) !important; }
.text-on-primary           { color: var(--color-on-primary) !important; }
.text-primary-fixed        { color: var(--color-primary-fixed) !important; }
.text-secondary-adepr      { color: var(--color-secondary) !important; }
.text-secondary-fixed      { color: var(--color-secondary-fixed) !important; }
.text-on-secondary-container { color: var(--color-on-secondary-container) !important; }
.text-on-surface           { color: var(--color-on-surface) !important; }
.text-on-surface-variant   { color: var(--color-on-surface-variant) !important; }

.bg-primary-adepr          { background-color: var(--color-primary) !important; }
.bg-primary-container      { background-color: var(--color-primary-container) !important; }
.bg-primary-fixed          { background-color: var(--color-primary-fixed) !important; }
.bg-secondary-container    { background-color: var(--color-secondary-container) !important; }
.bg-secondary-fixed        { background-color: var(--color-secondary-fixed) !important; }
.bg-surface                { background-color: var(--color-surface) !important; }
.bg-surface-bright         { background-color: var(--color-surface-bright) !important; }
.bg-surface-container      { background-color: var(--color-surface-container) !important; }
.bg-surface-container-low  { background-color: var(--color-surface-container-low) !important; }
.bg-surface-container-high { background-color: var(--color-surface-container-high) !important; }
.bg-white                  { background-color: #ffffff !important; }

.border-on-surface { border-color: var(--color-on-surface) !important; }
.border-secondary  { border-color: var(--color-secondary) !important; }
.border-secondary-container { border-color: var(--color-secondary-container) !important; }
.border-outline-variant { border-color: var(--color-outline-variant) !important; }

/* ---------- Spacing utility shortcuts (token-based) ---------- */
.gap-xs     { gap: var(--space-xs) !important; }
.gap-base   { gap: var(--space-base) !important; }
.gap-sm     { gap: var(--space-sm) !important; }
.gap-md     { gap: var(--space-md) !important; }
.gap-gutter { gap: var(--space-gutter) !important; }
.gap-lg     { gap: var(--space-lg) !important; }
.gap-xl     { gap: var(--space-xl) !important; }

.p-md  { padding: var(--space-md) !important; }
.p-lg  { padding: var(--space-lg) !important; }
.p-xl  { padding: var(--space-xl) !important; }
.py-lg { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }
.py-xl { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
.px-margin { padding-left: var(--space-margin) !important; padding-right: var(--space-margin) !important; }

.mb-base { margin-bottom: var(--space-base) !important; }
.mb-sm   { margin-bottom: var(--space-sm) !important; }
.mb-md   { margin-bottom: var(--space-md) !important; }
.mb-lg   { margin-bottom: var(--space-lg) !important; }
.mb-xl   { margin-bottom: var(--space-xl) !important; }
.mt-xl   { margin-top: var(--space-xl) !important; }

/* ---------- Container ---------- */
.container-adepr {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-margin);
  width: 100%;
}

/* ---------- Material Symbols (icon font) ---------- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
.material-symbols-outlined.icon-lg  { font-size: 48px; }
.material-symbols-outlined.icon-xl  { font-size: 64px; }
.material-symbols-outlined.icon-xxl { font-size: 120px; }
.material-symbols-outlined.icon-sm  { font-size: 18px; }

/* ---------- Decorative backgrounds ---------- */
.sun-ray-bg {
  background-image:
    radial-gradient(circle at center, transparent 0%, transparent 100%),
    repeating-conic-gradient(from 0deg, #ffe16d22 0deg 1deg, transparent 1deg 20deg);
}
.sun-ray-dots-bg {
  background-image:
    radial-gradient(circle at center, transparent 0%, transparent 100%),
    repeating-conic-gradient(from 0deg, transparent 0deg 1deg, rgba(115, 119, 132, 0.05) 1deg 2deg);
}
.sun-ray-dotted {
  background-image:
    radial-gradient(circle at center, transparent 0%, transparent 40%, rgba(0, 50, 125, 0.05) 41%, transparent 42%);
  background-size: 40px 40px;
}

/* ---------- Aspect ratio ---------- */
.aspect-16-9 { aspect-ratio: 16 / 9; }

/* ---------- Reset list ---------- */
.list-unstyled-clean { list-style: none; padding: 0; margin: 0; }
.list-unstyled-clean li + li { margin-top: var(--space-sm); }