/* ==========================================================================
   QB DESIGN SYSTEM  --  Quality Buildings LLC
   ==========================================================================

   Source     : Figma "Mosaico V3 - Quality Buildings"
   Compatible : Webflow Client-first, standalone HTML, any CSS workflow
   Updated    : 2026-04-29

   This file is a REFERENCE stylesheet. It can be used two ways:

     A) LINKED into a page  --  tokens are available via var()
          <link rel="stylesheet" href="qb-tokens.css">

     B) COPY-PASTE sections into Webflow custom CSS or a page <style>

   Every value is a flat literal (no var-to-var chains) so nothing breaks
   if this file fails to load or is used partially.


   TABLE OF CONTENTS
   -----------------
   1.  Primitives — Brand Primary
   2.  Primitives — Brand Secondary
   3.  Primitives — Neutrals
   4.  Primitives — System (Error / Success / Warning / Info)
   5.  Primitives — Alternates
   6.  Spacing Scale
   7.  Section Padding
   8.  Border Radius
   9.  Stroke Width
   10. Typography — Families, Sizes, Line-Heights, Letter-Spacing, Weights
   11. Semantic — Backgrounds & Fills
   12. Semantic — Text Colors
   13. Semantic — Borders
   14. QB Page Aliases — shorthand vars used across existing pages
   15. Responsive Typography


   HOW TO USE
   ----------

   Backgrounds:
     background: var(--bg-primary);             burnt orange  #c26929
     background: var(--bg-primary-lightest);     charcoal      #2f3438
     background: var(--bg-neutral);              light gray    #f5f5f5
     background: var(--bg-white);                white         #ffffff

   Text:
     color: var(--text-color-black);             near-black    #212121
     color: var(--text-color-primary);           deep navy     #003050
     color: var(--text-color-primary-hover);     orange        #c26929
     color: var(--text-color-white);             white         #ffffff

   Borders:
     border: var(--stroke-sm) solid var(--border-neutral);
     border: var(--stroke-sm) solid var(--border-lighter);

   Spacing:
     padding: var(--spacing-24) var(--spacing-48);
     padding-block: var(--section-padding-lg);
     gap: var(--spacing-16);

   Typography:
     font-family: var(--font-heading);
     font-size: var(--text-h2);  line-height: var(--lh-h2);
     font-weight: var(--fw-heading);  letter-spacing: var(--ls-h2);

   Radius:
     border-radius: var(--radius-md);

   Page shorthand aliases (match existing pages out of the box):
     background: var(--charcoal);      #2f3438
     color: var(--orange);             #c26929
     border-color: var(--steel);       #5f6d79


   CLIENT-FIRST WEBFLOW NOTES
   --------------------------
   - All names use flat -- separators; paste directly into Webflow fields.
   - Primitives prefixed --qb-* to avoid collisions with Webflow built-ins.
   - Semantic names (--bg-*, --text-color-*, --border-*) are short for embeds.
   - Spacing in rem so it scales with Webflow base font size.
   - Page aliases (--charcoal, --orange, --steel etc.) match the shorthand
     names already used in QB prototypes — no refactoring needed.
   ========================================================================== */


:root {

/* ==========================================================================
   1. PRIMITIVES — BRAND PRIMARY
   --------------------------------------------------------------------------
   QB-specific scale. Not a simple light-to-dark ramp.
   700/400 = Burnt Orange    600/500 = Navy    300/200 = Steel Blue    100 = Charcoal

   Swatch     Hex        Role
   700        #c26929    Burnt Orange accent (hover, emphasis)
   600        #003050    Deep Navy
   500        #00395f    Navy
   400        #c26929    Burnt Orange (main CTA, highlights)
   300        #3a698b    Steel Blue medium
   200        #5f6d79    Steel Blue (subtle accent)
   100        #2f3438    Dark Charcoal (dark backgrounds)
   ========================================================================== */

  --qb-primary-700: #c26929;
  --qb-primary-600: #003050;
  --qb-primary-500: #00395f;
  --qb-primary-400: #c26929;
  --qb-primary-300: #3a698b;
  --qb-primary-200: #5f6d79;
  --qb-primary-100: #2f3438;


/* ==========================================================================
   2. PRIMITIVES — BRAND SECONDARY (green family)
   --------------------------------------------------------------------------
   700  #01501a   darkest        300  #66be85   medium
   600  #016422   dark           200  #b3dec2   light
   500  #017629   medium-dark    100  #e6f4eb   lightest
   400  #018630   base
   ========================================================================== */

  --qb-secondary-700: #01501a;
  --qb-secondary-600: #016422;
  --qb-secondary-500: #017629;
  --qb-secondary-400: #018630;
  --qb-secondary-300: #66be85;
  --qb-secondary-200: #b3dec2;
  --qb-secondary-100: #e6f4eb;


/* ==========================================================================
   3. PRIMITIVES — NEUTRALS (true gray, no tint)
   --------------------------------------------------------------------------
   Swatch     Hex        Typical use
   Black      #000000    pure black (rare)
   900        #212121    near-black headings
   800        #424242    secondary text
   700        #616161    muted text, icons
   600        #757575    placeholder, disabled
   500        #9e9e9e    default icons
   400        #bdbdbd    input borders
   300        #e0e0e0    dividers, card borders
   200        #f5f5f5    light section backgrounds
   100        #fafafa    near-white backgrounds
   White      #ffffff    white
   ========================================================================== */

  --qb-neutral-black: #000000;
  --qb-neutral-900:   #212121;
  --qb-neutral-800:   #424242;
  --qb-neutral-700:   #616161;
  --qb-neutral-600:   #757575;
  --qb-neutral-500:   #9e9e9e;
  --qb-neutral-400:   #bdbdbd;
  --qb-neutral-300:   #e0e0e0;
  --qb-neutral-200:   #f5f5f5;
  --qb-neutral-100:   #fafafa;
  --qb-neutral-white: #ffffff;


/* ==========================================================================
   4. PRIMITIVES — SYSTEM COLORS
   --------------------------------------------------------------------------
   Each has 3 stops: 300 (dark label), 200 (icon/badge), 100 (bg tint).

   Error:    #b71c1c / #f44336 / #fdecea
   Success:  #1b5e20 / #4caf50 / #e8f5e9
   Warning:  #be5605 / #ef8206 / #fff8e1
   Info:     #004c99 / #0066cc / #edf2fe
   ========================================================================== */

  --qb-error-300:   #b71c1c;
  --qb-error-200:   #f44336;
  --qb-error-100:   #fdecea;

  --qb-success-300: #1b5e20;
  --qb-success-200: #4caf50;
  --qb-success-100: #e8f5e9;

  --qb-warning-300: #be5605;
  --qb-warning-200: #ef8206;
  --qb-warning-100: #fff8e1;

  --qb-info-500:    #004c99;
  --qb-info-400:    #0066cc;
  --qb-info-100:    #edf2fe;


/* ==========================================================================
   5. PRIMITIVES — ALTERNATES
   ========================================================================== */

  --qb-alt1-500: #954baf;
  --qb-alt1-100: #f4edf7;
  --qb-alt2-500: #262626;
  --qb-alt2-100: #f5f5f5;


/* ==========================================================================
   6. SPACING SCALE
   --------------------------------------------------------------------------
   4px base, rem units. Quick ref (at 16px root):
     4    8   12   16   20   24   28   32   36   40   44   48

   Usage:
     padding: var(--spacing-16) var(--spacing-24);
     gap: var(--spacing-12);
     margin-bottom: var(--spacing-32);
   ========================================================================== */

  --spacing-none: 0;
  --spacing-4:    0.25rem;
  --spacing-8:    0.5rem;
  --spacing-12:   0.75rem;
  --spacing-16:   1rem;
  --spacing-20:   1.25rem;
  --spacing-24:   1.5rem;
  --spacing-28:   1.75rem;
  --spacing-32:   2rem;
  --spacing-36:   2.25rem;
  --spacing-40:   2.5rem;
  --spacing-44:   2.75rem;
  --spacing-48:   3rem;


/* ==========================================================================
   7. SECTION PADDING
   --------------------------------------------------------------------------
   Vertical rhythm between page sections.
     sm = 48px    md = 64px    lg = 80px    xl = 128px

   Usage:
     padding-block: var(--section-padding-lg);
   ========================================================================== */

  --section-padding-sm: 3rem;
  --section-padding-md: 4rem;
  --section-padding-lg: 5rem;
  --section-padding-xl: 8rem;


/* ==========================================================================
   8. BORDER RADIUS
   --------------------------------------------------------------------------
   none = 0    sm = 8px    md = 12px    lg = 16px    xl = 24px    full = pill

   Usage:
     border-radius: var(--radius-md);
   ========================================================================== */

  --radius-none: 0;
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 999px;


/* ==========================================================================
   9. STROKE WIDTH
   --------------------------------------------------------------------------
   none = 0    sm = 1px    md = 2px

   Usage:
     border: var(--stroke-sm) solid var(--border-neutral);
   ========================================================================== */

  --stroke-none: 0;
  --stroke-sm:   1px;
  --stroke-md:   2px;


/* ==========================================================================
   10. TYPOGRAPHY
   --------------------------------------------------------------------------
   Font: Roboto (heading + body). Requires Google Fonts link:
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@
     0,300;0,400;0,500;0,700;0,900;1,400;1,700;1,900&display=swap"
     rel="stylesheet">

   Heading scale (Desktop → Mobile):
     H1  48/56 → 32/44    H4  24/34 → 20/26
     H2  36/46 → 26/34    H5  20/28 → 18/22
     H3  30/39 → 22/28    H6  16/24 (static)

   Body scale:
     lg  18/29 → 16/24  fluid       sm  12/19   captions (static)
     md  16/26   default (static)    xs  10/15   fine print (static)
     --  14/22   compact (static)

   Dynamic sizing technique:
     All heading and body-lg sizes use clamp() with a calc() linear
     interpolation that scales smoothly between 375px and 1440px viewports.

     Formula per step:
       slope     = (maxPx - minPx) / (1440 - 375)
       vwCoeff   = slope × 100
       intercept = (minPx - slope × 375) / 16          (rem)
       result    = clamp(minRem, calc(interceptRem + vwCoeffVw), maxRem)

     No media-query overrides needed — clamp() handles every viewport.

   Usage:
     h1 {
       font-family: var(--font-heading);
       font-size: var(--text-h1);  line-height: var(--lh-h1);
       letter-spacing: var(--ls-h1);  font-weight: var(--fw-heading);
     }
     p {
       font-size: var(--text-body-md);  line-height: var(--lh-body-md);
     }
     .eyebrow {
       font-size: var(--text-body-sm);  font-weight: var(--fw-bold);
       text-transform: uppercase;  letter-spacing: 0.12em;
     }
   ========================================================================== */

  /* Families */
  --font-heading: 'Roboto', sans-serif;
  --font-body:    'Roboto', sans-serif;

  /* Heading sizes — fluid (375px → 1440px) */
  --text-h1: clamp(2rem,     calc(1.648rem + 1.502vw), 3rem);       /* 32→48 */
  --text-h2: clamp(1.625rem, calc(1.405rem + 0.939vw), 2.25rem);    /* 26→36 */
  --text-h3: clamp(1.375rem, calc(1.199rem + 0.751vw), 1.875rem);   /* 22→30 */
  --text-h4: clamp(1.25rem,  calc(1.162rem + 0.376vw), 1.5rem);     /* 20→24 */
  --text-h5: clamp(1.125rem, calc(1.081rem + 0.188vw), 1.25rem);    /* 18→20 */
  --text-h6: 1rem;                                                    /* 16 static */

  /* Body sizes — body-lg fluid, rest static */
  --text-body-lg: clamp(1rem, calc(0.956rem + 0.188vw), 1.125rem);  /* 16→18 */
  --text-body-md: 1rem;
  --text-body:    0.875rem;
  --text-body-sm: 0.75rem;
  --text-body-xs: 0.625rem;

  /* Heading line-heights — fluid */
  --lh-h1: clamp(2.75rem,  calc(2.486rem + 1.127vw), 3.5rem);      /* 44→56 */
  --lh-h2: clamp(2.125rem, calc(1.861rem + 1.127vw), 2.875rem);    /* 34→46 */
  --lh-h3: clamp(1.75rem,  calc(1.508rem + 1.033vw), 2.4375rem);   /* 28→39 */
  --lh-h4: clamp(1.625rem, calc(1.449rem + 0.751vw), 2.125rem);    /* 26→34 */
  --lh-h5: clamp(1.375rem, calc(1.243rem + 0.563vw), 1.75rem);     /* 22→28 */
  --lh-h6: 1.5rem;

  /* Body line-heights — body-lg fluid, rest static */
  --lh-body-lg: clamp(1.5rem, calc(1.39rem + 0.47vw), 1.8125rem);  /* 24→29 */
  --lh-body-md: 1.625rem;
  --lh-body:    1.375rem;
  --lh-body-sm: 1.1875rem;
  --lh-body-xs: 0.9375rem;

  /* Heading letter-spacing */
  --ls-h1: -0.07rem;
  --ls-h2: -0.029rem;
  --ls-h3: -0.024rem;
  --ls-h4: -0.011rem;
  --ls-h5: 0;
  --ls-h6: 0;

  /* Font weights */
  --fw-heading: 600;
  --fw-bold:    600;
  --fw-medium:  500;
  --fw-normal:  400;
  --fw-light:   300;


/* ==========================================================================
   11. SEMANTIC — BACKGROUNDS & FILLS
   --------------------------------------------------------------------------
   Use for background-color / background / fill.
   Figma has 3 modes: Base (default), Invert, Accent.
   This file ships Base. To support Invert in code:

     [data-theme="invert"] {
       --bg-neutral: #424242;
       --text-color-black: #ffffff;
     }

   Common patterns:
     Dark section   :  background: var(--bg-primary-lightest);  charcoal
     Light section  :  background: var(--bg-neutral);           light gray
     CTA block      :  background: var(--bg-primary);           orange
     White card     :  background: var(--bg-white);
     Error banner   :  background: var(--bg-error-lighter);     pale red
   ========================================================================== */

  --bg-primary:          #c26929;
  --bg-primary-lighter:  #5f6d79;
  --bg-primary-lightest: #2f3438;
  --bg-secondary:          #018630;
  --bg-secondary-lighter:  #b3dec2;
  --bg-secondary-lightest: #e6f4eb;

  --bg-black:          #000000;
  --bg-neutral-darker: #757575;
  --bg-neutral-dark:   #bdbdbd;
  --bg-neutral:        #f5f5f5;
  --bg-neutral-light:  #fafafa;
  --bg-white:          #ffffff;

  --bg-error-darker:   #b71c1c;
  --bg-error:          #f44336;
  --bg-error-lighter:  #fdecea;
  --bg-success-darker: #1b5e20;
  --bg-success:        #4caf50;
  --bg-success-lighter:#e8f5e9;
  --bg-warning-darker: #be5605;
  --bg-warning:        #ef8206;
  --bg-warning-lighter:#fff8e1;
  --bg-info-darker:    #004c99;
  --bg-info:           #0066cc;
  --bg-info-lighter:   #edf2fe;

  --bg-alt1:         #954baf;
  --bg-alt1-lighter: #f4edf7;
  --bg-alt2:         #262626;
  --bg-alt2-lighter: #f5f5f5;


/* ==========================================================================
   12. SEMANTIC — TEXT COLORS
   --------------------------------------------------------------------------
   Hierarchy on light backgrounds:
     --text-color-black            #212121   headings
     --text-color-neutral-darker   #424242   subheadings
     --text-color-neutral          #757575   body
     --text-color-neutral-lighter  #9e9e9e   captions, disabled

   On dark backgrounds:
     --text-color-white            #ffffff   headings + body
     (use opacity for secondary text on dark)

   Accent:
     --text-color-primary          #003050   navy links
     --text-color-primary-hover    #c26929   orange hover

   Usage:
     h2    { color: var(--text-color-black); }
     p     { color: var(--text-color-neutral); }
     a     { color: var(--text-color-primary); }
     a:hover { color: var(--text-color-primary-hover); }
   ========================================================================== */

  --text-color-primary:       #003050;
  --text-color-primary-hover: #c26929;
  --text-color-secondary:       #016422;
  --text-color-secondary-hover: #01501a;

  --text-color-black:           #212121;
  --text-color-neutral-darker:  #424242;
  --text-color-neutral:         #757575;
  --text-color-neutral-lighter: #9e9e9e;
  --text-color-white:           #ffffff;

  --text-color-error-darker:   #b71c1c;
  --text-color-error:          #f44336;
  --text-color-success-darker: #1b5e20;
  --text-color-success:        #4caf50;
  --text-color-warning-darker: #be5605;
  --text-color-warning:        #ef8206;
  --text-color-info:           #0066cc;
  --text-color-info-hover:     #004c99;


/* ==========================================================================
   13. SEMANTIC — BORDERS
   --------------------------------------------------------------------------
   Usage:
     border: var(--stroke-sm) solid var(--border-neutral);

   Common combos:
     Card         var(--border-lighter)       #e0e0e0
     Input        var(--border-neutral)        #bdbdbd
     Divider      var(--border-lighter)       #e0e0e0
     Focus ring   var(--border-primary)        #c26929
     CTA hover    var(--border-primary-hover)  #003050
   ========================================================================== */

  --border-primary:       #c26929;
  --border-primary-hover: #003050;
  --border-secondary:       #018630;
  --border-secondary-hover: #016422;

  --border-black:   #212121;
  --border-darker:  #616161;
  --border-neutral: #bdbdbd;
  --border-lighter: #e0e0e0;
  --border-white:   #ffffff;

  --border-error-darker:   #b71c1c;
  --border-error:          #f44336;
  --border-success-darker: #1b5e20;
  --border-success:        #4caf50;
  --border-warning-darker: #be5605;
  --border-warning:        #ef8206;
  --border-info:           #0066cc;
  --border-info-darker:    #004c99;


/* ==========================================================================
   14. QB PAGE ALIASES
   --------------------------------------------------------------------------
   Shorthand variable names already used in existing QB pages.
   Defined here so NEW pages that link this file get them for free
   without having to declare their own :root block.

   Existing pages (qb-hero, qb-developer) define these in their own
   <style> :root — those values WIN via cascade order (inline > linked).
   So linking this file into an existing page is safe and changes nothing.

   These defaults match the qb-developer page (latest prototype).
   Override any of them in your page <style> :root if needed:

     :root {
       --cm: clamp(28px, 4vw, 80px);   <-- narrower margin for this page
     }
   ========================================================================== */

  /* Brand color shorthands */
  --charcoal:      #2f3438;
  --charcoal-deep: #1e2124;
  --orange:        #c26929;
  --orange-glow:   rgba(194, 105, 41, 0.15);
  --steel:         #5f6d79;

  /* Neutral shorthands (warm-tinted to match QB aesthetic) */
  --white:         #faf9f7;
  --light:         #f3f2ef;
  --med:           #d1cfcc;

  /* Alternate neutral names used in qb-hero */
  --color-charcoal:    #2f3438;
  --color-light-gray:  #f1f3f4;
  --color-medium-gray: #cfd1d2;

  /* Accessible text-on-dark overrides (WCAG AA 4.5:1) */
  --text-on-dark:        rgba(255, 255, 255, 0.75);   /* 7.9:1 on charcoal — body text */
  --text-on-dark-muted:  rgba(255, 255, 255, 0.58);   /* 5.3:1 on charcoal — secondary */
  --text-on-dark-deep:   rgba(255, 255, 255, 0.55);   /* 4.7:1 on charcoal-deep — links */
  --text-on-light-muted: rgba(47, 52, 56, 0.72);      /* 5.9:1 on --light — secondary */

  /* Structural line colors */
  --line-w: rgba(255, 255, 255, 0.12);
  --line-d: rgba(47, 52, 56, 0.08);
  --color-line: rgba(255, 255, 255, 0.22);

  /* Easing curves */
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-dramatic: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);

  /* Content margin (responsive) */
  --cm:             clamp(32px, 5vw, 96px);
  --content-margin: clamp(28px, 4vw, 80px);
}


/* ==========================================================================
   15. RESPONSIVE TYPOGRAPHY — HANDLED BY CLAMP()
   --------------------------------------------------------------------------
   All heading and body-lg sizes now use clamp() with a calc() linear
   interpolation (375px → 1440px). No media-query overrides are needed.

   The formula ensures every size scales smoothly and hits its exact
   min at 375px and max at 1440px — no dead zones or sudden jumps.

   If you need a size to behave differently on a specific page,
   override the token in that page's <style> :root block.
   ========================================================================== */