/*
 * Site-wide type scale.
 *
 * The landing page (home.php + assets/css/home.css) is the reference: every value below is one of
 * its own tokens, applied by role to every other page. It is not loaded on the front page, which
 * already uses them. Only size, weight, line height and letter spacing are set; colours stay with
 * each page.
 *
 * Selectors start at #vs-type (an id on <body>) so they win over Tailwind utilities and the
 * designer's page CSS without !important. They never reach the shared chrome (header, menus,
 * closing CTA band, footer) or product mockups (app UI previews), which keep their own type.
 *
 *   Page title     h1                     hero token        64px desktop / 40px phone
 *   Section title  marketing h2           section token     52px / 32px
 *   Lead           p right after a title  lead token        20px / 18px
 *   Subsection     legal + blog h2        landing's text-2xl sm:text-3xl step, 30px / 24px
 *   Card title     content card h3        card token        24px / 20px  (text-xl/2xl and designer cards)
 */

:root {
    --vs-type-hero: clamp(2.5rem, 5vw, 4rem);
    --vs-type-section: clamp(2rem, 4vw, 3.25rem);
    --vs-type-lead: 1.125rem;
    --vs-type-lead-lg: 1.25rem;
    --vs-type-subsection: 1.5rem;
    --vs-type-subsection-lg: 1.875rem;
    --vs-type-card: 1.25rem;
    --vs-type-card-lg: 1.5rem;
}

/* ---------------------------------------------------------------- page title */
#vs-type h1:not(:is(#navbar, nav, footer, .vs-footer-cta, dialog, .vs-feature-preview, .vs-feature-dashboard, [role="img"]) *):not(.vsb-article__title) {
    font-size: var(--vs-type-hero);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em;
}

/* Blog posts: the title sits over a reading column, so it takes the section step. */
#vs-type .vsb-article__title {
    font-size: var(--vs-type-section);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.035em;
}

/* ------------------------------------------------------------- section title */
/* Every content h2 except: chrome, mockups, small label-style h2s, and the blog/release/contact
   components and long-form documents handled below. */
#vs-type h2:not(:is(#navbar, nav, footer, .vs-footer-cta, dialog, .vs-feature-preview, .vs-feature-dashboard, [role="img"], .ai-assistant-container, .competitor-compare-shell, .content-section, .vsb-prose) *):not([class*="vsb-"], [class*="vsr-"], .vsc-h3, .text-xl, .text-lg, .text-base, .text-sm) {
    font-size: var(--vs-type-section);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.035em;
}

/* --------------------------------------------------------------------- lead */
#vs-type :is(h1, h2):not(:is(#navbar, nav, footer, .vs-footer-cta, dialog, .vs-feature-preview, .vs-feature-dashboard, [role="img"], .ai-assistant-container, .competitor-compare-shell, .content-section, .vsb-prose) *):not([class*="vsb-"], [class*="vsr-"], .vsc-h3, .text-xl, .text-lg, .text-base, .text-sm) + p {
    font-size: var(--vs-type-lead);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
}

/* -------------------------------------------- subsection (long-form documents) */
/* Legal pages (privacy, terms, refund) and blog post headings. */
#vs-type :is(.content-section h2, .vsb-prose h2) {
    font-size: var(--vs-type-subsection);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

/* App-mockup titles keep the mockup's own rules; this only fills in what those leave unset (they
   used to inherit the 52px section size by mistake). :where() keeps it below any mockup rule. */
:where(#vs-type .vs-feature-preview) h2 {
    font-weight: 700;
    line-height: 1.2;
}

/* --------------------------------------------------------------- card title */
#vs-type :is(h3.text-xl, h3.text-2xl, h3.vs-card-title, h3.vs-feature-title, .vs-feature-card h3, .office-step h3, .office-room-card__body h3):not(:is(#navbar, nav, footer, .vs-footer-cta, dialog, .vs-feature-preview, .vs-feature-dashboard, [role="img"], .ai-assistant-container, .competitor-compare-shell, .content-section, .vsb-prose) *) {
    font-size: var(--vs-type-card);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
}

/* h3s in the designer's product pages fall back to weight 400 (Tailwind's reset); headings are bold
   on the landing page. h4s stay as designed (the landing page uses 600 for them). */
#vs-type.vs-marketing-page h3:not(:is(#navbar, nav, footer, .vs-footer-cta, dialog, .vs-feature-preview, .vs-feature-dashboard, [role="img"]) *) {
    font-weight: 700;
}

@media (min-width: 640px) {
    #vs-type :is(h1, h2):not(:is(#navbar, nav, footer, .vs-footer-cta, dialog, .vs-feature-preview, .vs-feature-dashboard, [role="img"], .ai-assistant-container, .competitor-compare-shell, .content-section, .vsb-prose) *):not([class*="vsb-"], [class*="vsr-"], .vsc-h3, .text-xl, .text-lg, .text-base, .text-sm) + p {
        font-size: var(--vs-type-lead-lg);
    }

    #vs-type :is(.content-section h2, .vsb-prose h2) {
        font-size: var(--vs-type-subsection-lg);
    }

    #vs-type :is(h3.text-xl, h3.text-2xl, h3.vs-card-title, h3.vs-feature-title, .vs-feature-card h3, .office-step h3, .office-room-card__body h3):not(:is(#navbar, nav, footer, .vs-footer-cta, dialog, .vs-feature-preview, .vs-feature-dashboard, [role="img"], .ai-assistant-container, .competitor-compare-shell, .content-section, .vsb-prose) *) {
        font-size: var(--vs-type-card-lg);
    }
}