/* ==========================================================================
   KVG Enterprises — Base layer
   Modern reset · document defaults · typography · layout primitives
   (.container, .section bands, 12-col grid) · focus rings · reduced-motion.
   Depends on tokens.css. No hard-coded hex — colors via tokens only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Modern reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button { cursor: pointer; }

p,
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[role="list"],
ol[role="list"] { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; border-spacing: 0; }

/* --------------------------------------------------------------------------
   Document defaults — Inter 17/28 ink-700 on white (§4.3)
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-ink-700);
  background-color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   Headings — Barlow, scale per §4.3. Exactly one H1 per page (authoring rule).
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-ink-900);
  line-height: 1.15;
}

h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  font-weight: var(--fw-bold);
}
h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: var(--fw-semibold);
}
h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  font-weight: var(--fw-semibold);
}
h4 {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  font-weight: var(--fw-semibold);
}
h5, h6 {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  font-weight: var(--fw-semibold);
}

/* Display utility — homepage hero H1 only */
.text-display {
  font-family: var(--font-display);
  font-size: var(--text-display-size);
  line-height: var(--text-display-lh);
  font-weight: var(--fw-bold);
}

/* --------------------------------------------------------------------------
   Body text elements
   -------------------------------------------------------------------------- */
p { line-height: var(--text-body-lh); }

.lead {
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-lh);
  font-weight: var(--fw-regular);
  color: var(--color-ink-700);
}

small,
.text-small {
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.text-muted { color: var(--color-ink-500); }

strong, b { font-weight: var(--fw-semibold); }

/* Inline text links inside prose/content */
.content a,
a.link {
  color: var(--color-primary-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--motion-fast) var(--motion-ease);
}
.content a:hover,
a.link:hover { color: var(--color-primary-700); }

/* Technical figures — mono, tabular */
.mono,
.tnum {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Prose column — capped line length ~70ch (§4.3) */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2,
.prose h3 { margin-top: var(--space-7); }

/* --------------------------------------------------------------------------
   Container — 1280px, side padding 32/20 (§4.4)
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (max-width: 768px) {
  .container { padding-inline: var(--container-pad-mobile); }
}

.container-narrow {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (max-width: 768px) {
  .container-narrow { padding-inline: var(--container-pad-mobile); }
}

/* --------------------------------------------------------------------------
   Section bands — 96/56 padding; surface / surface-alt / dark variants (§4.4)
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-pad);
  background-color: var(--color-surface);
}
.section--alt { background-color: var(--color-surface-alt); }

.section--compact { padding-block: var(--section-pad-compact); }

/* Dark statement bands */
.section--dark {
  background-color: var(--color-primary-800);
  color: var(--color-surface);
}
.section--darker {
  background-color: var(--color-primary-900);
  color: var(--color-surface);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--darker h1,
.section--darker h2,
.section--darker h3,
.section--darker h4 { color: var(--color-surface); }

.section--dark .text-muted,
.section--darker .text-muted { color: var(--color-primary-300); }

@media (max-width: 768px) {
  .section { padding-block: var(--section-pad-mobile); }
  .section--compact { padding-block: var(--space-8); }
}

/* --------------------------------------------------------------------------
   12-column grid utilities (§4.4) — 24px gutters
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gutter);
}

/* Column-span helpers */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Auto-fit card grids (product/category grids §4.4) */
.grid-cards {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4-up >=1280 */
}
@media (max-width: 1279.98px) { .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 3-up 1024-1279 */
@media (max-width: 1023.98px) { .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 2-up 640-1023 */
/* Stays 2-up on phones — one card per row made the page far too long to scan.
   Card internals shrink instead (see .category-card in components.css). */
@media (max-width: 639.98px)  { .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }

/* Collapse the 12-col grid on small screens */
@media (max-width: 768px) {
  .grid > [class*="col-"] { grid-column: 1 / -1; }
}

/* Simple flow/stack helpers */
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   Accessibility — skip link, focus rings on EVERY interactive element (§4.4)
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100%;
  z-index: 1000;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary-900);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
  transition: top var(--motion-fast) var(--motion-ease);
}
.skip-link:focus { top: var(--space-4); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
/* Guarantee visible rings on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
/* On dark surfaces, use the lighter focus tone for contrast */
.section--dark :focus-visible,
.section--darker :focus-visible,
.site-footer :focus-visible,
.utility-bar :focus-visible,
.mega-menu :focus-visible {
  outline-color: var(--color-primary-300);
}

/* Screen-reader-only utility */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion — global kill switch for all animation (§4.4)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}