/* GENERATED by tools/build-prerender.cjs from styles.src.css - edit the tokens or styles.src.css, not this file. */
/* ============================================================
   SOS Remodels & Contracting - DESIGN SYSTEM ENTRY
   Consumers link THIS file only. Import order matters:
   fonts → tokens → effects. Keep this file as @import lines only.
   ============================================================ */

/* ---- tokens/fonts.css (inlined by tools/build-prerender.cjs from styles.src.css) ---- */
/* ============================================================
   SOS Remodels & Contracting - WEBFONTS (SELF-HOSTED)
   Headlines & body: Montserrat. Display/condensed: Oswald.
   Variable woff2 binaries (latin subset) live in assets/fonts/,
   pulled from Google Fonts July 2026. Self-hosted so print
   vendors, offline use, and exports never depend on a CDN.
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/Montserrat-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/Montserrat-Italic-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/Oswald-var.woff2') format('woff2');
}

/* ------------------------------------------------------------
   Metric-matched FALLBACK faces (CLS fix, Sep 2026).
   While the webfonts load, text renders in a local font whose
   width and line metrics are adjusted to match Montserrat / Oswald,
   so the swap does not move the layout. Values were measured in
   Chrome against Arial: Montserrat runs 12.5% (w400) to 18.5% (w700)
   wider than Arial, Oswald about 14% narrower (w500). Line metrics
   from the fonts' hhea tables divided by the size-adjust.
   Keep 'Montserrat Fallback' / 'Oswald Fallback' right after the
   real face in every stack (tokens/typography.css).
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial'), local('Helvetica'), local('Roboto');
  size-adjust: 113.5%;
  ascent-override: 85.3%;
  descent-override: 22.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Oswald Fallback';
  src: local('Arial'), local('Helvetica'), local('Roboto');
  size-adjust: 87%;
  ascent-override: 137.1%;
  descent-override: 33.2%;
  line-gap-override: 0%;
}


/* ---- tokens/colors.css (inlined by tools/build-prerender.cjs from styles.src.css) ---- */
/* ============================================================
   SOS Remodels & Contracting - COLOR TOKENS
   Dual-mode brand: warm "paper" light surfaces + near-black
   "premium" dark surfaces, unified by a single brass-gold accent.
   ============================================================ */

:root {
  /* --- Brand core ---------------------------------------- */
  --sos-black:        #0E0E0E;  /* primary ink / dark canvas (slightly warm) */
  --sos-ink:          #1A1A1A;  /* near-black for headlines on light */
  --sos-charcoal:     #222222;  /* dark surface / card on black */
  --sos-charcoal-2:   #2C2C2C;  /* raised dark surface */

  --sos-gold:         #B0852C;  /* PRIMARY brass - accent on light surfaces */
  --sos-gold-deep:    #8E6A20;  /* pressed / darker brass */
  --sos-gold-bright:  #CDA349;  /* brighter brass - accent on dark surfaces */
  --sos-gold-soft:    #E7D9B6;  /* faded gold for hairlines / wash on light */

  --sos-cream:        #F7F4EE;  /* warm paper - primary light canvas */
  --sos-cream-2:      #FBF9F5;  /* lighter paper / card on cream */
  --sos-white:        #FFFFFF;

  /* --- Neutrals (warm-leaning grayscale) ----------------- */
  --sos-gray-900:     #1A1A1A;
  --sos-gray-800:     #2E2E2E;
  --sos-gray-700:     #444444;
  --sos-gray-600:     #5E5E5E;
  --sos-gray-500:     #7A7A7A;
  --sos-gray-400:     #9A9A9A;
  --sos-gray-300:     #C4C0B8;  /* warm hairline on light */
  --sos-gray-200:     #E2DED6;  /* warm border on light */
  --sos-gray-100:     #EEEAE2;

  /* Dark-mode neutral steps (for borders/text on black) */
  --sos-dk-line:      rgba(255,255,255,0.12);
  --sos-dk-line-2:    rgba(255,255,255,0.06);
  --sos-dk-text:      #E9E7E2;
  --sos-dk-muted:     #A8A6A0;

  /* --- Semantic status ----------------------------------- */
  --sos-success:      #3F7D4E;
  --sos-warning:      #C08A2E;
  --sos-danger:       #B23B2E;
  --sos-info:         #3B5C7A;

  /* ============================================================
     SEMANTIC ALIASES - reference these in components, not the
     raw scale above. Defaults target the LIGHT (paper) theme.
     ============================================================ */

  /* Surfaces */
  --surface-page:     var(--sos-cream);
  --surface-card:     var(--sos-white);
  --surface-raised:   var(--sos-cream-2);
  --surface-inverse:  var(--sos-black);
  --surface-wash:     var(--sos-gray-100);

  /* Text */
  --text-strong:      var(--sos-ink);     /* headlines */
  --text-body:        var(--sos-gray-700);
  --text-muted:       #6B6B6B;  /* was gray-500 #7A7A7A - darkened for WCAG AA on cream/white */
  --text-faint:       #6F6F6F;  /* was gray-400 #9A9A9A - darkened for WCAG AA on cream/white */
  --text-on-dark:     var(--sos-dk-text);
  --text-on-gold:     var(--sos-black);
  --text-accent:      var(--sos-gold-deep); /* was --sos-gold #B0852C (3.07:1 on cream, fails AA small text); deep #8E6A20 = 4.96:1 */

  /* Lines & borders */
  --border-subtle:    var(--sos-gray-200);
  --border-strong:    var(--sos-gray-300);
  --rule-accent:      var(--sos-gold);

  /* Accent / interactive */
  --accent:           var(--sos-gold);
  --accent-hover:     var(--sos-gold-deep);
  --accent-contrast:  var(--sos-black);
  --focus-ring:       rgba(176,133,44,0.45);
}

/* ============================================================
   DARK ("premium") THEME - apply via <body data-theme="dark">
   or any wrapper with .sos-dark. Re-maps the semantic aliases
   so the SAME components render correctly on black.
   ============================================================ */
[data-theme="dark"],
.sos-dark {
  --surface-page:     var(--sos-black);
  --surface-card:     var(--sos-charcoal);
  --surface-raised:   var(--sos-charcoal-2);
  --surface-inverse:  var(--sos-cream);
  --surface-wash:     rgba(255,255,255,0.04);

  --text-strong:      var(--sos-white);
  --text-body:        var(--sos-dk-text);
  --text-muted:       var(--sos-dk-muted);
  --text-faint:       var(--sos-gray-500);
  --text-on-dark:     var(--sos-dk-text);
  --text-accent:      var(--sos-gold-bright);

  --border-subtle:    var(--sos-dk-line);
  --border-strong:    rgba(255,255,255,0.20);
  --rule-accent:      var(--sos-gold-bright);

  --accent:           var(--sos-gold-bright);
  --accent-hover:     var(--sos-gold);
  --accent-contrast:  var(--sos-black);
  --focus-ring:       rgba(205,163,73,0.5);
}


/* ---- tokens/typography.css (inlined by tools/build-prerender.cjs from styles.src.css) ---- */
/* ============================================================
   SOS Remodels & Contracting - TYPOGRAPHY TOKENS
   Bold geometric sans, strong hierarchy, generous spacing.
   "Large bold typography, minimal clutter, strong hierarchy."
   ============================================================ */

:root {
  /* --- Families ------------------------------------------ */
  --font-display: 'Oswald', 'Oswald Fallback', 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif; /* condensed - posters, big numerals, signage */
  --font-head:    'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;            /* headlines & UI emphasis */
  --font-body:    'Montserrat', 'Montserrat Fallback', system-ui, -apple-system, sans-serif;

  /* --- Weights ------------------------------------------- */
  --fw-regular:   400; /* @kind other */
  --fw-medium:    500; /* @kind other */
  --fw-semibold:  600; /* @kind other */
  --fw-bold:      700; /* @kind other */
  --fw-extra:     800; /* @kind other */

  /* --- Type scale (rem, 16px base) ----------------------- */
  --text-3xs:   0.6875rem;  /* 11px */
  --text-2xs:   0.75rem;    /* 12px - eyebrow / caption */
  --text-xs:    0.8125rem;  /* 13px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px - body */
  --text-md:    1.125rem;   /* 18px - lead body */
  --text-lg:    1.375rem;   /* 22px */
  --text-xl:    1.75rem;    /* 28px */
  --text-2xl:   2.25rem;    /* 36px */
  --text-3xl:   3rem;       /* 48px */
  --text-4xl:   4rem;       /* 64px */
  --text-5xl:   5.5rem;     /* 88px - hero / poster */
  --text-6xl:   7.5rem;     /* 120px - billboard numerals */

  /* --- Line heights -------------------------------------- */
  --leading-none:    1;     /* @kind other */
  --leading-tight:   1.08;  /* @kind other */
  --leading-snug:    1.25;  /* @kind other */
  --leading-normal:  1.55;  /* @kind other */
  --leading-relaxed: 1.7;   /* @kind other */

  /* --- Letter spacing ------------------------------------ */
  --tracking-tight:   -0.02em;  /* large display */
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.14em;   /* eyebrows / labels */
  --tracking-widest:  0.22em;   /* spaced uppercase accents (logo-style) */
}

/* ============================================================
   TYPE PRIMITIVES - opt-in helper classes.
   Components can use these or reference the tokens directly.
   ============================================================ */

.sos-eyebrow {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-accent);
}

.sos-display {
  font-family: var(--font-head);
  font-weight: var(--fw-extra);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.sos-h1 { font-family: var(--font-head); font-weight: var(--fw-extra); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.sos-h2 { font-family: var(--font-head); font-weight: var(--fw-bold);  font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--text-strong); }
.sos-h3 { font-family: var(--font-head); font-weight: var(--fw-bold);  font-size: var(--text-xl);  line-height: var(--leading-snug); color: var(--text-strong); }
.sos-h4 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-strong); }

.sos-lead { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-body); }
.sos-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-body); }
.sos-small { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); }

/* Condensed display numerals (process steps, stats, signage) */
.sos-numeral {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-none);
  color: var(--text-accent);
  font-variant-numeric: tabular-nums;
}


/* ---- tokens/spacing.css (inlined by tools/build-prerender.cjs from styles.src.css) ---- */
/* ============================================================
   SOS Remodels & Contracting - SPACING & LAYOUT TOKENS
   8px base rhythm. "Lots of breathing room."
   ============================================================ */

:root {
  --space-0:   0;
  --space-1:   0.25rem;   /* 4  */
  --space-2:   0.5rem;    /* 8  */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.5rem;    /* 24 */
  --space-6:   2rem;      /* 32 */
  --space-7:   2.5rem;    /* 40 */
  --space-8:   3rem;      /* 48 */
  --space-9:   4rem;      /* 64 */
  --space-10:  5rem;      /* 80 */
  --space-11:  6rem;      /* 96 */
  --space-12:  8rem;      /* 128 */

  /* Layout */
  --container-sm:  640px;
  --container-md:  900px;
  --container-lg:  1200px;
  --container-xl:  1440px;
  --gutter:        var(--space-6);
  --section-y:     var(--space-11);  /* generous vertical section padding */
}


/* ---- tokens/effects.css (inlined by tools/build-prerender.cjs from styles.src.css) ---- */
/* ============================================================
   SOS Remodels & Contracting - EFFECTS TOKENS
   Corner radii, borders, shadows, motion.
   Premium = restrained. Slightly soft corners, crisp hairlines,
   low-spread shadows. No heavy gradients (brand rule).
   ============================================================ */

:root {
  /* --- Radii --------------------------------------------- */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;   /* default card / button */
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);

  /* --- Border widths ------------------------------------- */
  --border-hair:   1px;
  --border-thin:   1.5px;
  --border-accent: 2px;   /* gold framing lines / vertical accent bars */
  --border-bar:    4px;   /* heavy section rule (proposal style) */

  /* --- Shadows (warm-tinted, low spread) ----------------- */
  --shadow-xs:  0 1px 2px rgba(20,16,8,0.06);
  --shadow-sm:  0 2px 6px rgba(20,16,8,0.08);
  --shadow-md:  0 6px 18px rgba(20,16,8,0.10);
  --shadow-lg:  0 16px 40px rgba(20,16,8,0.14);
  --shadow-gold: 0 6px 20px rgba(176,133,44,0.22);  /* premium accent lift */

  /* Inset hairline used to crisp up cards on cream */
  --ring-inset: inset 0 0 0 1px var(--sos-gray-200);

  /* --- Motion -------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */

  /* --- Z-index ------------------------------------------- */
  --z-base:    1;    /* @kind other */
  --z-sticky:  100;  /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal:   1100; /* @kind other */
  --z-toast:   1200; /* @kind other */
}