/*
 * base-layout.css
 * Global layout baseline for all storefront pages.
 * Loaded first in base.html before page-specific CSS.
 */

html {
  scrollbar-gutter: stable;
}

:root {
  --storefront-gutter-bg: #eef3fa;
  /* Canonical content shell (matches Tailwind theme.extend.maxWidth.shell). */
  --storefront-content-max: 1248px;
  --storefront-side-gutter: clamp(14px, 2.5vw, 32px);

  /*
   * Typography standard (2026-08-13): Montserrat + Playfair Display.
   * Font scale: 12/13/14/15/16/18/22/28/36/48/64px; minimum text size 12px.
   * See docs/TYPOGRAPHY.md.
   */
  --font-sans: "Montserrat", Arial, Helvetica, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  --text-caption: 12px;  /* min size: badges, SKU, breadcrumbs, eyebrow */
  --text-small: 13px;    /* secondary text, form hints, footer links */
  --text-body: 14px;     /* default body text, buttons, inputs */
  --text-md: 15px;       /* emphasized body / list items */
  --text-lg: 16px;       /* card titles, product names */
  --text-xl: 18px;       /* lead / subtitle / card heading */
  --text-2xl: 22px;      /* sub-section heading */
  --text-3xl: 28px;      /* section heading */
  --text-4xl: 36px;      /* page heading */
  --text-5xl: 48px;      /* hero heading (compact) */
  --text-6xl: 64px;      /* hero display heading */

  --leading-body: 1.5;
  --leading-heading: 1.15;

  /* Weights. Titles were ExtraBold 800 — 25% thinner → 600. */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-title: 600;    /* card/section names (was 800) */
  --fw-display: 600;  /* Playfair h1/h2 (was browser 700) */

  /*
   * Soft blue text-card panel (fire PDP .fd-features / .fd-configurator).
   * Use for product/category text blocks: description, specs, configurator,
   * listing cards — white shell around, soft blue fill inside the card.
   * Do not invent alternate pastel fills for the same role (design lock 2026-08-07).
   */
  --storefront-text-card-bg: linear-gradient(180deg, #fbfcff 0%, #f5f8fe 100%);
  --storefront-text-card-bg-solid: #f5f8fe;
  --storefront-text-card-border: #d9e1ee;
  --storefront-text-card-radius: 7px;
  --storefront-workspace-bg: #edf1f6;
  --storefront-workspace-border: #c2cfdf;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings: display serif for h1/h2, sans for h3+ (page CSS overrides by role). */
h1,
h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--leading-heading);
}

h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-title);
  line-height: var(--leading-heading);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
h5 { font-size: var(--text-body); }
h6 { font-size: var(--text-small); }

@media (max-width: 767px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-lg); }
  h4 { font-size: var(--text-body); }
  h5 { font-size: var(--text-small); }
}

/*
 * One shared canvas for the outer gutters of every storefront page.
 * Page-scoped roots keep ownership of their own surfaces and sections.
 *
 * /fire-doors/ is excluded from this shared token only: it paints its own
 * PVC-like gradient on body.fire-doors-page in fire_doors.css (shell-only
 * substrate; composition remains frozen under AGENTS §3.1).
 */
body:not(.fire-doors-page) {
  background: var(--storefront-gutter-bg);
}