/* Geist is loaded via a <link> tag in the page layouts (default_layout.php,
   default_layout_dashboard.php) — not @import here, which would chain a
   render-blocking request behind this stylesheet. */

/* ===========================================================================
   RISEAX TYPOGRAPHY SYSTEM — single canonical source for every heading,
   body, and utility text style across the entire site.

   Do not add page-specific heading font-sizes anywhere else. If a page needs
   a heading to look different, it should reach for one of the utility
   classes below (.display / .heading-xl / .heading-lg / .heading-md /
   .heading-sm / .body-lg / .body / .small / .caption), not invent a new
   compound selector with its own font-size.

   Marketing scale (homepage only): Display 64 / H1 48 / H2 36 / H3 30 /
   H4 24 / H5 20 / H6 18 / Body Large 18 / Body 16 / Small 14 / Caption 12.

   App scale (everywhere else — dashboard, Create Campaign, auth pages):
   H1 32 / H2 24 / H3 20 / H4 18 / H5 16 / H6 14. Landing pages read bigger
   than functional app screens on every major SaaS product (Stripe/Linear
   included) — this app scale matches that, and is denser/more compact per
   direct feedback comparing Riseax's app screens against competitors.

   Homepage Hero is the ONLY place that uses Display (64px). Add
   class="display" to the hero heading only.
   =========================================================================== */

:root {
    --rx-type-display: 64px;
    --rx-type-h1: 48px;
    --rx-type-h2: 36px;
    --rx-type-h3: 30px;
    --rx-type-h4: 24px;
    --rx-type-h5: 20px;
    --rx-type-h6: 18px;
    --rx-type-body-lg: 18px;
    --rx-type-body: 16px;
    --rx-type-small: 14px;
    --rx-type-caption: 12px;
}

html,
body,
button,
input,
select,
textarea {
    font-family: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.display, .heading-xl, .heading-lg, .heading-md, .heading-sm {
    font-family: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: #17171b;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    margin: 0;
}

/* ---- Elements: every h1-h6 on every page, no exceptions ---- */
h1 { font-size: var(--rx-type-h1) !important; line-height: 1.1 !important; }
h2 { font-size: var(--rx-type-h2) !important; line-height: 1.2 !important; }
h3 { font-size: var(--rx-type-h3) !important; line-height: 1.25 !important; }
h4 { font-size: var(--rx-type-h4) !important; line-height: 1.3 !important; }
h5 { font-size: var(--rx-type-h5) !important; line-height: 1.35 !important; }
h6 { font-size: var(--rx-type-h6) !important; line-height: 1.4 !important; letter-spacing: 0 !important; }

/* ---- App scale: dashboard, Create Campaign, and auth pages ----
   Scoped to the wrapper class each of those page families already
   renders (.campaign-app = Wallet/Support/Campaigns List/Create Campaign
   step 1/Profile/Payment&Thank-you; .campaign-focus-page = Create
   Campaign step 2; .auth-page = Login/Register/Forgot Password).
   The homepage uses #rx-main instead, so it's untouched and keeps the
   marketing scale above. */
.campaign-app h1, .campaign-focus-page h1, .auth-page h1 { font-size: 32px !important; line-height: 1.2 !important; }
.campaign-app h2, .campaign-focus-page h2, .auth-page h2 { font-size: 24px !important; line-height: 1.3 !important; }
.campaign-app h3, .campaign-focus-page h3, .auth-page h3 { font-size: 20px !important; line-height: 1.3 !important; }
.campaign-app h4, .campaign-focus-page h4, .auth-page h4 { font-size: 18px !important; line-height: 1.35 !important; }
.campaign-app h5, .campaign-focus-page h5, .auth-page h5 { font-size: 16px !important; line-height: 1.4 !important; }
.campaign-app h6, .campaign-focus-page h6, .auth-page h6 { font-size: 14px !important; line-height: 1.4 !important; }

/* ---- Utility classes (Rule 6) — usable on any element ---- */
.display     { font-size: var(--rx-type-display) !important; line-height: 1.05 !important; }
.heading-xl  { font-size: var(--rx-type-h1) !important; line-height: 1.1 !important; }
.heading-lg  { font-size: var(--rx-type-h2) !important; line-height: 1.2 !important; }
.heading-md  { font-size: var(--rx-type-h3) !important; line-height: 1.25 !important; }
.heading-sm  { font-size: var(--rx-type-h4) !important; line-height: 1.3 !important; }

.body-lg, .small, .caption, .body {
    font-family: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 400;
    letter-spacing: 0;
    color: #17171b;
}
.body-lg  { font-size: var(--rx-type-body-lg) !important; line-height: 1.6 !important; }
.body     { font-size: var(--rx-type-body) !important; line-height: 1.6 !important; }
.small    { font-size: var(--rx-type-small) !important; line-height: 1.5 !important; }
.caption  { font-size: var(--rx-type-caption) !important; line-height: 1.4 !important; color: #6b7280; }

/* ---- Mobile scale-down (proportional, still on-scale) ---- */
@media (max-width: 767px) {
    h1, .heading-xl { font-size: 32px !important; }
    h2, .heading-lg { font-size: 26px !important; }
    h3, .heading-md { font-size: 21px !important; }
    h4, .heading-sm { font-size: 18px !important; }
    h5 { font-size: 16px !important; }
    h6 { font-size: 14px !important; }
    .display { font-size: 40px !important; }
}