/*
 * Global Typography System
 * One consistent scale for all public/admin pages.
 */

:root {
  /* Website baseline scale (public pages) */
  --typo-size-display: clamp(2.18rem, 1.82rem + 1.28vw, 2.92rem);
  --typo-size-h1: clamp(1.84rem, 1.56rem + 0.84vw, 2.34rem);
  --typo-size-h2: clamp(1.52rem, 1.34rem + 0.52vw, 1.84rem);
  --typo-size-h3: clamp(1.28rem, 1.18rem + 0.28vw, 1.44rem);
  --typo-size-h4: clamp(1.1rem, 1.05rem + 0.16vw, 1.22rem);
  --typo-size-h5: clamp(1rem, 0.98rem + 0.08vw, 1.08rem);
  --typo-size-h6: clamp(0.9rem, 0.88rem + 0.04vw, 0.96rem);

  --typo-size-body: clamp(0.98rem, 0.96rem + 0.06vw, 1.03rem);
  --typo-size-meta: clamp(0.86rem, 0.84rem + 0.04vw, 0.92rem);
  --typo-size-label: clamp(0.8rem, 0.78rem + 0.03vw, 0.86rem);
  --typo-size-kicker: clamp(0.66rem, 0.64rem + 0.03vw, 0.72rem);

  --typo-line-tight: 1.2;
  --typo-line-title: 1.3;
  --typo-line-body: 1.58;

  /* Website spacing rhythm */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-7: 2rem; /* 32px */
  --space-8: 2.5rem; /* 40px */
  --space-9: 3rem; /* 48px */
  --space-10: 4rem; /* 64px */

  /* Backward-compatible aliases used across the project */
  --type-display: var(--typo-size-display);
  --type-page-title: var(--typo-size-h1);
  --type-section-title: var(--typo-size-h2);
  --type-card-title: var(--typo-size-h4);
  --type-body-md: var(--typo-size-body);
  --type-body-sm: var(--typo-size-meta);
  --type-meta: var(--typo-size-meta);
  --type-label: var(--typo-size-label);

  --app-fs-body: var(--typo-size-body);
  --app-fs-meta: var(--typo-size-meta);

  /* Primary button sizing */
  --typo-btn-primary-font-size: clamp(0.76rem, 0.74rem + 0.03vw, 0.82rem);
  --typo-btn-primary-pad-y: 0.54rem;
  --typo-btn-primary-pad-x: 1.2rem;
  --typo-btn-primary-min-height: 44px;

  /* Existing project spacing aliases */
  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-3);
  --spacing-md: var(--space-5);
  --spacing-lg: var(--space-7);
  --spacing-xl: var(--space-8);
  --spacing-2xl: var(--space-9);
  --spacing-3xl: var(--space-10);
}

/* Admin baseline scale (Operations/Registrations style) */
body.admin-app {
  --typo-size-display: clamp(1.34rem, 1.14rem + 0.62vw, 1.7rem);
  --typo-size-h1: clamp(1.18rem, 1.04rem + 0.44vw, 1.42rem);
  --typo-size-h2: clamp(1rem, 0.95rem + 0.14vw, 1.1rem);
  --typo-size-h3: clamp(0.94rem, 0.92rem + 0.1vw, 1rem);
  --typo-size-h4: clamp(0.88rem, 0.86rem + 0.06vw, 0.94rem);
  --typo-size-h5: 0.86rem;
  --typo-size-h6: 0.82rem;

  --typo-size-body: 0.84rem;
  --typo-size-meta: 0.74rem;
  --typo-size-label: 0.8rem;
  --typo-size-kicker: 0.64rem;

  --typo-line-title: 1.38;
  --typo-line-body: 1.45;

  --space-1: 0.25rem; /* 4px */
  --space-2: 0.375rem; /* 6px */
  --space-3: 0.5rem; /* 8px */
  --space-4: 0.625rem; /* 10px */
  --space-5: 0.75rem; /* 12px */
  --space-6: 0.875rem; /* 14px */
  --space-7: 1rem; /* 16px */
  --space-8: 1.25rem; /* 20px */
  --space-9: 1.5rem; /* 24px */
  --space-10: 2rem; /* 32px */
}

@media (max-width: 767px) {
  :root {
    --typo-size-display: clamp(1.9rem, 7.5vw, 2.28rem);
    --typo-size-h1: clamp(1.54rem, 6vw, 1.88rem);
    --typo-size-h2: clamp(1.3rem, 4.9vw, 1.58rem);
    --typo-size-h3: clamp(1.12rem, 4.1vw, 1.32rem);
    --typo-size-h4: 1rem;
    --typo-size-h5: 0.94rem;
    --typo-size-h6: 0.88rem;

    --typo-size-body: 0.94rem;
    --typo-size-meta: 0.84rem;
    --typo-size-label: 0.78rem;
    --typo-size-kicker: 0.64rem;

    --typo-btn-primary-font-size: 0.76rem;
    --typo-btn-primary-pad-y: 0.5rem;
    --typo-btn-primary-pad-x: 1rem;
    --typo-btn-primary-min-height: 44px;
  }

  body.admin-app {
    --typo-size-display: clamp(1.22rem, 5.2vw, 1.46rem);
    --typo-size-h1: clamp(1.06rem, 4.6vw, 1.24rem);
    --typo-size-h2: 0.96rem;
    --typo-size-h3: 0.9rem;
    --typo-size-h4: 0.86rem;
    --typo-size-h5: 0.82rem;
    --typo-size-h6: 0.78rem;

    --typo-size-body: 0.82rem;
    --typo-size-meta: 0.72rem;
    --typo-size-label: 0.78rem;
    --typo-size-kicker: 0.62rem;
  }
}

/* Page-level variable harmonization */
body.public-mood {
  --public-fs-title-md: var(--typo-size-h3);
  --public-fs-title-sm: var(--typo-size-h4);
  --public-fs-body: var(--typo-size-body);
  --public-fs-body-sm: var(--typo-size-meta);
  --public-fs-label: var(--typo-size-label);
}

.services-page {
  --services-fs-body: var(--typo-size-body);
  --services-fs-meta: var(--typo-size-meta);
  --services-fs-label: var(--typo-size-label);
}

.opportunity-page {
  --opportunity-fs-body: var(--typo-size-body);
  --opportunity-fs-meta: var(--typo-size-meta);
  --opportunity-fs-label: var(--typo-size-label);
}

.community-page {
  --community-fs-body: var(--typo-size-body);
  --community-fs-meta: var(--typo-size-meta);
  --community-fs-label: var(--typo-size-label);
}

.social-impact-page {
  --impact-fs-body: var(--typo-size-body);
  --impact-fs-meta: var(--typo-size-meta);
  --impact-fs-label: var(--typo-size-label);
}

.about-page {
  --about-fs-body: var(--typo-size-body);
  --about-fs-meta: var(--typo-size-meta);
  --about-fs-label: var(--typo-size-label);
}

.event-detail-page {
  --event-fs-body: var(--typo-size-body);
  --event-fs-meta: var(--typo-size-meta);
  --event-fs-label: var(--typo-size-label);
}

.auth-page {
  --auth-fs-body: var(--typo-size-body);
  --auth-fs-meta: var(--typo-size-meta);
  --auth-fs-label: var(--typo-size-label);
}

.home-page {
  --home-fs-title: var(--typo-size-h2);
  --home-fs-body: var(--typo-size-body);
  --home-fs-body-sm: var(--typo-size-meta);
}

body.public-mood .contact-page {
  --contact-fs-page-title: var(--typo-size-h1);
  --contact-fs-page-subtitle: var(--typo-size-body);
  --contact-fs-section-title: var(--typo-size-h3);
  --contact-fs-card-title: var(--typo-size-h5);
  --contact-fs-body: var(--typo-size-body);
  --contact-fs-label: var(--typo-size-label);
}

/* Website nav readability */
body:not(.admin-app) .navbar .nav-link,
body:not(.admin-app) .navbar .mobile-submenu-toggle,
body:not(.admin-app) .navbar .dropdown-item,
body:not(.admin-app) .nav-guest-actions .guest-login-link {
  font-size: clamp(0.94rem, 0.92rem + 0.08vw, 1rem);
}

@media (max-width: 991px) {
  body:not(.admin-app) .navbar .nav-link,
  body:not(.admin-app) .navbar .mobile-submenu-toggle,
  body:not(.admin-app) .navbar .dropdown-item,
  body:not(.admin-app) .nav-guest-actions .guest-login-link {
    font-size: 0.92rem;
  }
}

@media (max-width: 575px) {
  body:not(.admin-app) .navbar .nav-link,
  body:not(.admin-app) .navbar .mobile-submenu-toggle,
  body:not(.admin-app) .navbar .dropdown-item,
  body:not(.admin-app) .nav-guest-actions .guest-login-link {
    font-size: 0.88rem;
  }
}

/* Semantic typography rules */
html {
  font-size: 16px;
}

body {
  font-size: var(--typo-size-body);
  line-height: var(--typo-line-body);
}

h1,
.h1,
.page-title {
  font-size: var(--typo-size-h1) !important;
  line-height: var(--typo-line-tight) !important;
  letter-spacing: -0.015em;
}

h2,
.h2,
.section-title,
[class*='-section-title'] {
  font-size: var(--typo-size-h2) !important;
  line-height: var(--typo-line-title) !important;
  letter-spacing: -0.012em;
}

h3,
.h3,
.card-title,
[class*='-card-title'],
[class*='-grid-title'],
[class*='-panel-title'] {
  font-size: var(--typo-size-h3) !important;
  line-height: var(--typo-line-title) !important;
  letter-spacing: -0.01em;
}

h4,
.h4 {
  font-size: var(--typo-size-h4) !important;
  line-height: var(--typo-line-title) !important;
}

h5,
.h5 {
  font-size: var(--typo-size-h5) !important;
  line-height: 1.34 !important;
}

h6,
.h6 {
  font-size: var(--typo-size-h6) !important;
  line-height: 1.34 !important;
}

.page-subtitle,
.section-subtitle,
.lead,
[class*='-subtitle']:not([class*='-subtitle-toggle']):not([class*='-subtitle-wrap']) {
  font-size: var(--typo-size-body) !important;
  line-height: var(--typo-line-body) !important;
}

p,
li,
dd,
dt,
.card-text,
.form-control,
.form-select,
textarea,
input,
select,
button,
.btn {
  font-size: var(--typo-size-body);
  line-height: var(--typo-line-body);
}

small,
.small,
.text-muted,
[class*='-meta'] {
  font-size: var(--typo-size-meta);
  line-height: 1.46;
}

label,
.form-label,
.form-check-label,
[class*='-label'] {
  font-size: var(--typo-size-label);
  line-height: 1.38;
}

[class*='-kicker'] {
  font-size: var(--typo-size-kicker) !important;
  line-height: 1.34;
}

.section-subtitle {
  font-size: var(--typo-size-kicker) !important;
  line-height: 1.34;
}

/* Primary buttons: intentionally compact */
:is(.btn-primary, .admin-btn-primary) {
  font-size: var(--typo-btn-primary-font-size) !important;
  padding: var(--typo-btn-primary-pad-y) var(--typo-btn-primary-pad-x) !important;
  min-height: var(--typo-btn-primary-min-height) !important;
  line-height: 1.2 !important;
}

/* Keep outlined primary actions visually lighter than body text */
.btn-outline-primary {
  font-size: var(--typo-btn-primary-font-size) !important;
}