/* 405rubbermulch.com — flattened design-system stylesheet (self-contained for deploy) */

/* ===== tokens/fonts.css ===== */
/* ===========================================================================
   Jameson's — Webfonts
   Display:  Archivo     — modern grotesque. Confident, architectural, editorial.
   Body:     Public Sans — plain, legible, trustworthy grotesque for UI + copy.
   Mono:     Spline Sans Mono — calculators, measurements, spec tables.
   Served from Google Fonts with display=swap.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap');


/* ===== tokens/colors.css ===== */
/* ===========================================================================
   Jameson's — Color tokens
   Brand: royal blue (trust/navigation) + vibrant red (deals/CTA) + warm cream.
   Red is reserved for prices, sales and primary CTAs. Blue carries brand,
   navigation and trust. Neutrals are very slightly warm to sit on cream.
   =========================================================================== */
:root {
  /* --- Brand: Blue (trust, brand, navigation) --- */
  --blue-50:  #F1F3FB;
  --blue-100: #E2E7F5;
  --blue-200: #C2CCEC;
  --blue-300: #95A4D9;
  --blue-400: #6B7CC0;
  --blue-500: #45579F;   /* primary brand blue */
  --blue-600: #3A4C94;
  --blue-700: #2E3C77;
  --blue-800: #243059;
  --blue-900: #1B2444;

  /* --- Brand: Red (deals, prices, primary CTA) --- */
  --red-50:  #FDF1F0;
  --red-100: #FBE0DF;
  --red-200: #F5BCBA;
  --red-300: #EC8E8C;
  --red-400: #E2605E;
  --red-500: #D8403F;    /* primary deal/CTA red */
  --red-600: #BE3534;
  --red-700: #A02C2B;
  --red-800: #7E2322;

  /* --- Brand: Cream / warm paper --- */
  --cream-50:  #FBF7EC;
  --cream-100: #F7F0DF;
  --cream-200: #EFE6CE;
  --cream-300: #E4D8B9;

  /* --- Warm neutrals (ink) --- */
  --ink-900: #1C2230;   /* primary text */
  --ink-800: #2A3142;
  --ink-700: #3A4150;
  --ink-600: #4C5462;
  --ink-500: #5C6473;
  --ink-400: #818897;
  --ink-300: #AEB4C0;
  --ink-200: #D6DAE2;
  --ink-150: #E3E0D6;   /* warm hairline on cream */
  --ink-100: #EAECF1;
  --ink-50:  #F5F6F9;
  --white:   #FFFFFF;
  --black:   #11141C;

  /* --- Secondary accent: 405 Rubber Mulch (landscaping / playground) --- */
  --green-50:  #EFF5F0;
  --green-100: #DBEADD;
  --green-500: #4C8B5A;
  --green-600: #3B7349;
  --green-700: #2F5E3A;
  --earth-500: #7A5C40;
  --earth-600: #5E4631;
  --earth-700: #4A3826;

  /* --- Status --- */
  --green-success: #2E8B57;
  --amber-warning: #C9821B;
  --amber-50: #FBF3E2;
  --red-danger: #C5342F;
  --blue-info: #3A4C94;

  /* ===== Semantic aliases ===== */
  --color-text:          var(--ink-900);
  --color-text-muted:    var(--ink-500);
  --color-text-subtle:   var(--ink-400);
  --color-text-onbrand:  var(--cream-50);
  --color-text-link:     var(--blue-600);

  --color-bg:            var(--white);
  --color-bg-warm:       var(--cream-50);
  --color-bg-brand:      var(--blue-500);
  --color-bg-brand-deep: var(--blue-700);

  --color-surface:        var(--white);
  --color-surface-warm:   var(--cream-50);
  --color-surface-sunken: var(--cream-100);

  --color-border:        var(--ink-150);
  --color-border-strong: var(--ink-200);
  --color-border-cool:   var(--blue-100);

  --color-primary:        var(--blue-500);   /* brand / trust actions */
  --color-primary-hover:  var(--blue-600);
  --color-primary-press:  var(--blue-700);

  --color-deal:           var(--red-500);    /* prices, sale, hero CTA */
  --color-deal-hover:     var(--red-600);
  --color-deal-press:     var(--red-700);

  --color-focus:          var(--blue-400);
}

/* ===== Microsite theme: 405 Rubber Mulch =====
   Same blue brand spine, but the primary action shifts to landscaping green
   and surfaces warm toward earth. Apply class="theme-mulch" on a wrapper. */
.theme-mulch {
  --color-primary:        var(--green-600);
  --color-primary-hover:  var(--green-700);
  --color-primary-press:  var(--green-700);
  --color-bg-brand:       var(--green-700);
  --color-bg-brand-deep:  var(--earth-700);
  --color-bg-warm:        #F4F1E8;
  --color-text-link:      var(--green-700);
  --color-focus:          var(--green-500);
}


/* ===== tokens/typography.css ===== */
/* ===========================================================================
   Jameson's — Typography tokens
   Archivo for display/headings (modern, confident), Public Sans for body and UI.
   Prices and measurements use tabular figures; the calculator uses mono.
   =========================================================================== */
:root {
  /* Families */
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;

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

  /* Type scale (1.20 minor-third, rounded to whole px) */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   21px;
  --text-xl:   25px;
  --text-2xl:  31px;
  --text-3xl:  39px;
  --text-4xl:  49px;
  --text-5xl:  61px;
  --text-6xl:  76px;

  /* Line heights */
  --leading-tight:   1.08;
  --leading-snug:    1.22;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.022em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.10em;   /* eyebrows / labels in all-caps */

  /* ===== Semantic roles ===== */
  --font-heading: var(--font-display);
  --weight-heading: var(--fw-bold);

  --text-display:   var(--text-6xl);   /* hero headline */
  --text-h1:        var(--text-4xl);
  --text-h2:        var(--text-3xl);
  --text-h3:        var(--text-2xl);
  --text-h4:        var(--text-xl);
  --text-body-lg:   var(--text-md);
  --text-body:      var(--text-base);
  --text-body-sm:   var(--text-sm);
  --text-caption:   var(--text-xs);
  --text-eyebrow:   var(--text-xs);
}


/* ===== tokens/spacing.css ===== */
/* ===========================================================================
   Jameson's — Spacing, radius, shadow, layout, motion tokens
   4px base grid. Friendly, generous radii (the brand is rounded). Soft, slightly
   warm shadows echo the badge's drop shadow.
   =========================================================================== */
:root {
  /* Spacing — 4px grid */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Radii — rounded, friendly */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* Shadows — soft, slightly warm/cool neutral */
  --shadow-xs:  0 1px 2px rgba(28, 34, 48, 0.06);
  --shadow-sm:  0 1px 3px rgba(28, 34, 48, 0.08), 0 1px 2px rgba(28, 34, 48, 0.06);
  --shadow-md:  0 4px 10px rgba(28, 34, 48, 0.08), 0 2px 4px rgba(28, 34, 48, 0.06);
  --shadow-lg:  0 10px 24px rgba(28, 34, 48, 0.10), 0 4px 8px rgba(28, 34, 48, 0.06);
  --shadow-xl:  0 22px 48px rgba(28, 34, 48, 0.14), 0 8px 16px rgba(28, 34, 48, 0.08);
  --shadow-brand: 0 8px 20px rgba(46, 60, 119, 0.22);   /* blue lift */
  --shadow-deal:  0 8px 18px rgba(216, 64, 63, 0.28);   /* red CTA lift */
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Focus ring */
  --ring-width: 3px;
  --ring-color: color-mix(in srgb, var(--color-focus) 55%, transparent);
  --ring: 0 0 0 var(--ring-width) var(--ring-color);

  /* Borders */
  --border-hairline: 1px solid var(--color-border);
  --border-strong:   1.5px solid var(--color-border-strong);

  /* Layout */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1080px;
  --container-xl:  1240px;
  --container-2xl: 1360px;
  --gutter:        clamp(16px, 4vw, 40px);  /* @kind spacing */
  --header-h:      72px;

  /* Motion — quick, practical, no bounce on UI */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);  /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   180ms;  /* @kind other */
  --dur-slow:   280ms;  /* @kind other */
}


/* ===== tokens/base.css ===== */
/* ===========================================================================
   Jameson's — Base element styles & utilities
   Applies the token system to real elements. Kept lean.
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p { text-wrap: pretty; }

a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

::selection { background: var(--blue-200); color: var(--ink-900); }

/* Numeric / price treatment */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---- Eyebrow / kicker label ---- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-deal);
}

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- "Truckload" hazard stripe accent (deals / warehouse) ---- */
.deal-stripe {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--red-500) 0 14px,
    var(--cream-50) 14px 28px
  );
}