/* ============================================================
   font.css
   Hybrid responsive font scale - text + icon tiers.

   Load order:
     1. bootstrap.min.css
     2. theme.css / colors.css / tokens.css
     3. font.css   ← this file
     4. bs5-overrides.css
     5. site.css

   Two scale tiers:
     --fs-*       Text scale  (readable content: body, labels,
                               headings, UI elements)
     --fs-icon-*  Icon scale  (presentational: feature icons,
                               stat numbers, decorative marks)

   Both use clamp(min, fluid-vw, max) so every size responds
   to the viewport while staying within readable bounds.
   ============================================================ */


/* ============================================================
   1. FONT FAMILIES
   Driven by the tenant's Theme page: ThemeCss.StyleBlock emits
   --site-font / --site-font-head / --site-font-alt from the
   selected font combination, and these tokens follow it. The
   fallbacks are the app's stock look (Inter, vendored), so a
   tenant that never chose a combo renders exactly as before.
   ============================================================ */

:root {
    --font-primary: var(--site-font, 'Inter', system-ui, -apple-system, sans-serif);
    --font-heading: var(--site-font-head, 'Inter', system-ui, -apple-system, sans-serif);
    --font-body-alt: 'Noto Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}


/* ============================================================
   2. TEXT SCALE  -  --fs-*
   Fluid readable text, 12px → 80px.
   Follows a ~1.25 type ratio with vw-based fluid middle.

   Stop      Min       Fluid    Max       Usage
   ──────────────────────────────────────────────────────────
   --fs-xs   0.75rem   2vw      0.875rem  Micro labels, badges
   --fs-sm   0.875rem  2.5vw    1rem      Secondary text, meta
   --fs-base 1rem      3vw      1.125rem  Body copy
   --fs-lg   1.125rem  3.5vw    1.25rem   Large body, lead text
   --fs-xl   1.25rem   4vw      1.5rem    Card headings, h5
   --fs-2xl  1.5rem    5vw      1.875rem  Section labels, h4
   --fs-3xl  1.875rem  6vw      2.25rem   Component headings, h3
   --fs-4xl  2.25rem   7vw      3rem      Page headings, h2
   --fs-5xl  3rem      8vw      3.75rem   Hero headings, h1
   --fs-6xl  3.75rem   10vw     5rem      Display / hero XL
   ============================================================ */

:root {
    /* Base font size - respects user browser preferences */
    font-size: 100%; /* 16px default */
    /* ── Text scale ────────────────────────────────────────── */

    --fs-xs: clamp(0.75rem, 2vw, 0.875rem); /* 12px → 14px */
    --fs-sm: clamp(0.875rem, 2.5vw, 1rem); /* 14px → 16px */
    --fs-base: clamp(1rem, 3vw, 1.125rem); /* 16px → 18px */
   /* --fs-base: clamp(1rem, 3.25vw, 1.2rem);  16px → 18px */
    --fs-lg: clamp(1.125rem, 3.5vw, 1.25rem); /* 18px → 20px */
    --fs-xl: clamp(1.25rem, 4vw, 1.5rem); /* 20px → 24px */
    --fs-2xl: clamp(1.5rem, 5vw, 1.875rem); /* 24px → 30px */
    --fs-3xl: clamp(1.875rem, 6vw, 2.25rem); /* 30px → 36px */
    --fs-4xl: clamp(2.25rem, 7vw, 3rem); /* 36px → 48px */
    --fs-5xl: clamp(3rem, 8vw, 3.75rem); /* 48px → 60px */
    --fs-6xl: clamp(3.75rem, 10vw, 5rem); /* 60px → 80px */
}


/* ============================================================
   3. ICON SCALE  -  --fs-icon-*
   Presentational sizes for feature icons, stat numerics,
   emoji accents, and decorative oversized marks.

   Uses the same clamp() approach as the text scale so icons
   still respond to viewport, but with a wider range and
   tighter vw values (icons scale less aggressively than text).

   Stop              Min       Fluid    Max      Typical use
   ──────────────────────────────────────────────────────────
   --fs-icon-xs      1rem      2.5vw    1.25rem  Tiny inline icons (i tags in lists)
   --fs-icon-sm      1.25rem   3vw      1.6rem   Small inline icons (.d-icon, nav icons)
   --fs-icon-md      1.6rem    3.5vw    2.2rem   Medium badge icons (24px–32px range)
   --fs-icon-lg      2rem      4vw      2.5rem   Large feature icons, circle badges
   --fs-icon-xl      2.5rem    5vw      3rem     Stat numbers, counter displays
   --fs-icon-2xl     3rem      6vw      3.5rem   Trophy emoji, price display, hero icon
   --fs-icon-3xl     3.5rem    7vw      4.5rem   Extra large display numerics
   --fs-icon-quote   4rem      8vw      5rem     Decorative quote marks (.cc-01)
   --fs-icon-giant   6rem      10vw    8rem      Giant background glyphs (.cc-16::before)
   ============================================================ */

:root {
    --fs-icon-xs: clamp(1rem, 2.5vw, 1.25rem); /* Tiny inline icons        */
    --fs-icon-sm: clamp(1.25rem, 3vw, 1.6rem); /* Small inline icons       */
    --fs-icon-md: clamp(1.6rem, 3.5vw, 2.2rem); /* Medium badge icons       */
    --fs-icon-lg: clamp(2rem, 4vw, 2.5rem); /* Large feature icons      */
    --fs-icon-xl: clamp(2.5rem, 5vw, 3rem); /* Stat numbers, counters   */
    --fs-icon-2xl: clamp(3rem, 6vw, 3.5rem); /* Trophy, prices, hero     */
    --fs-icon-3xl: clamp(3.5rem, 7vw, 4.5rem); /* XL display numerics      */
    --fs-icon-quote: clamp(4rem, 8vw, 5rem); /* Decorative quote marks   */
    --fs-icon-giant: clamp(6rem, 10vw, 8rem); /* Giant background glyphs  */
}


/* ============================================================
   4. LINE HEIGHTS
   ============================================================ */

:root {
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
}


/* ============================================================
   5. LETTER SPACING
   ============================================================ */

:root {
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
}


/* ============================================================
   6. SEMANTIC SIZE ALIASES
   Maps meaningful names onto the raw scale stops.
   ============================================================ */

:root {
    /* ── Headings ──────────────────────────────────────────── */
    --font-size-h1: var(--fs-5xl);
    --font-size-h2: var(--fs-4xl);
    --font-size-h3: var(--fs-3xl);
    --font-size-h4: var(--fs-2xl);
    --font-size-h5: var(--fs-xl);
    --font-size-h6: var(--fs-lg);
    /* ── Body ──────────────────────────────────────────────── */
    --font-size-body: var(--fs-base);
    --font-size-small: var(--fs-sm);
    --font-size-tiny: var(--fs-xs);
    --font-size-quote: var(--fs-lg);
    --font-size-button: var(--fs-sm);
    --font-size-nav: var(--fs-base);
    --font-size-label: var(--fs-xs);
    --font-size-badge: var(--fs-xs);
    --font-size-meta: var(--fs-xs);
    --font-size-caption: var(--fs-sm);
    --font-size-lead: var(--fs-lg);
    --font-size-code: var(--fs-sm);
    /* ── Icon semantic aliases ─────────────────────────────── */
    --font-size-icon: var(--fs-icon-md); /* default icon size  */
    --font-size-icon-inline: var(--fs-icon-xs); /* inside text        */
    --font-size-icon-btn: var(--fs-icon-sm); /* inside buttons     */
    --font-size-icon-nav: var(--fs-icon-sm); /* navigation icons   */
    --font-size-icon-feature: var(--fs-icon-lg); /* feature card icons */
    --font-size-icon-hero: var(--fs-icon-2xl); /* hero/trophy icons  */
    --font-size-stat: var(--fs-icon-xl); /* stat card numbers  */
    --font-size-stat-lg: var(--fs-icon-2xl); /* large stat numbers */
    --font-size-price: var(--fs-icon-2xl); /* pricing display    */
    --font-size-counter: var(--fs-icon-xl); /* counter widgets    */
    --font-size-quote-mark: var(--fs-icon-quote); /* decorative quotes */
}


/* ============================================================
   7. APPLY TO ELEMENTS
   ============================================================ */

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    line-height: var(--leading-normal);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

h1, .h1 {
    font-size: var(--font-size-h1);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 700;
    margin-bottom: 0.5em;
}

h2, .h2 {
    font-size: var(--font-size-h2);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 700;
}

h3, .h3 {
    font-size: var(--font-size-h3);
    line-height: var(--leading-snug);
    font-weight: 600;
}

h4, .h4 {
    font-size: var(--font-size-h4);
    line-height: var(--leading-snug);
    font-weight: 600;
}

h5, .h5 {
    font-size: var(--font-size-h5);
    line-height: var(--leading-normal);
    font-weight: 500;
}

h6, .h6 {
    font-size: var(--font-size-h6);
    line-height: var(--leading-normal);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
}

/* Bootstrap's .display-1..6 (Craft's Hero block "Title size" option, DEF.hero.titleSize)
   carry their own font-weight:300 — correct for a non-heading use like the Pricing block's
   price display (a <div>, not a heading), but on a real heading it silently overrides the
   weight above: a class selector (.display-4, specificity 0-1-0) always outranks a bare
   element selector (h1, 0-0-1) regardless of source order. Every current Hero/Pricing
   template also hardcodes fw-bold alongside titleSize (index.html), and fw-bold is
   Bootstrap's one !important utility, so nothing visibly changes today — this guards the
   case that convention stops holding (an editor clears the CSS class field, or a future
   block pairs displaySize with something other than fw-bold) without relying on a second
   class always being present. h1[class] (element + attribute, 0-1-1) beats a bare
   .display-N (0-1-0) without touching .display-N on a non-heading element, where Bootstrap's
   own 300 is the correct, intended weight. */
h1[class] { font-weight: 700; }
h2[class] { font-weight: 700; }
h3[class] { font-weight: 600; }
h4[class] { font-weight: 600; }
h5[class] { font-weight: 500; }
h6[class] { font-weight: 500; }

p {
    font-size: var(--font-size-body);
    line-height: var(--leading-relaxed);
    margin-bottom: 1rem;
}

small, .small {
    font-size: var(--font-size-small);
}

code, kbd, pre, samp {
    font-family: var(--font-mono);
    font-size: var(--font-size-code);
}


/* ============================================================
   8. RESPONSIVE OVERRIDES
   ============================================================ */

/* Very small devices */
@media (max-width: 480px) {
    :root {
        --fs-5xl: clamp(2.5rem, 7vw, 3rem);
        --fs-6xl: clamp(3rem, 8vw, 3.5rem);
        --fs-icon-2xl: clamp(2.5rem, 5vw, 3rem);
        --fs-icon-3xl: clamp(3rem, 6vw, 3.75rem);
        --fs-icon-quote: clamp(3rem, 7vw, 4rem);
        --fs-icon-giant: clamp(4rem, 8vw, 6rem);
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    :root {
        --fs-5xl: clamp(3rem, 6vw, 4rem);
        --fs-6xl: clamp(3.75rem, 8vw, 5rem);
        --fs-icon-2xl: clamp(3.5rem, 6vw, 4rem);
        --fs-icon-3xl: clamp(4rem, 7vw, 5rem);
        --fs-icon-giant: clamp(7rem, 9vw, 10rem);
    }
}


/* ============================================================
   9. UTILITY CLASSES
   ============================================================ */

/* ── Text scale utilities ──────────────────────────────────── */
.text-xs {
    font-size: var(--fs-xs);
}

.text-sm {
    font-size: var(--fs-sm);
}

.text-base {
    font-size: var(--fs-base);
}

.text-lg {
    font-size: var(--fs-lg);
}

.text-xl {
    font-size: var(--fs-xl);
}

.text-2xl {
    font-size: var(--fs-2xl);
}

.text-3xl {
    font-size: var(--fs-3xl);
}

.text-4xl {
    font-size: var(--fs-4xl);
}

.text-5xl {
    font-size: var(--fs-5xl);
}

.text-6xl {
    font-size: var(--fs-6xl);
}

.text-fluid {
    font-size: clamp(1rem, 4vw, 2rem);
}

/* ── Icon scale utilities ──────────────────────────────────── */
.icon-xs {
    font-size: var(--fs-icon-xs);
}

.icon-sm {
    font-size: var(--fs-icon-sm);
}

.icon-md {
    font-size: var(--fs-icon-md);
}

.icon-lg {
    font-size: var(--fs-icon-lg);
}

.icon-xl {
    font-size: var(--fs-icon-xl);
}

.icon-2xl {
    font-size: var(--fs-icon-2xl);
}

.icon-3xl {
    font-size: var(--fs-icon-3xl);
}

/* ── Font family utilities ─────────────────────────────────── */
.font-primary {
    font-family: var(--font-primary);
}

.font-heading {
    font-family: var(--font-heading);
}

.font-body-alt {
    font-family: var(--font-body-alt);
}

.font-mono {
    font-family: var(--font-mono);
}

.text-body-alt {
    font-family: var(--font-body-alt);
}

/* ── Line height utilities ─────────────────────────────────── */
.leading-none {
    line-height: var(--leading-none);
}

.leading-tight {
    line-height: var(--leading-tight);
}

.leading-snug {
    line-height: var(--leading-snug);
}

.leading-normal {
    line-height: var(--leading-normal);
}

.leading-relaxed {
    line-height: var(--leading-relaxed);
}

.leading-loose {
    line-height: var(--leading-loose);
}

/* ── Letter spacing utilities ──────────────────────────────── */
.tracking-tighter {
    letter-spacing: var(--tracking-tighter);
}

.tracking-tight {
    letter-spacing: var(--tracking-tight);
}

.tracking-normal {
    letter-spacing: var(--tracking-normal);
}

.tracking-wide {
    letter-spacing: var(--tracking-wide);
}

.tracking-wider {
    letter-spacing: var(--tracking-wider);
}

.tracking-widest {
    letter-spacing: var(--tracking-widest);
}

/* ── Responsive helpers ────────────────────────────────────── */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }
}

@media (min-width: 1024px) {
    .text-desktop-lg {
        font-size: var(--fs-xl);
    }
}