/* ============================================================================
   hempkart.in — BASE / RESET / GRID / A11Y UTILITIES
   ----------------------------------------------------------------------------
   Load order (see INTEGRATION-PATTERN.md): base.css -> tokens.css -> components.css
   NOTE on load order: base.css is linked FIRST but REFERENCES tokens from
   tokens.css. CSS custom properties resolve at use-time regardless of the order
   the :root declarations appear, so linking base first is safe — the tokens are
   defined by the time the page paints. The order base -> tokens -> components is
   the package convention; do not reorder per-template.

   Scope of this file: a light reset, sensible document defaults (linen bg, ink
   text, body font), accessible focus-visible states, the 12-col container/grid
   helpers, and a small set of utilities (.visually-hidden, etc).
   Accessibility hygiene is first-class here — focus states and contrast matter in
   a trust-sensitive category.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. RESET-ISH
   --------------------------------------------------------------------------- */

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

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd, ul, ol {
  margin: 0;
}

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

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

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

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* Respect reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   2. DOCUMENT DEFAULTS
   --------------------------------------------------------------------------- */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: var(--weight-reg);
  color: var(--color-ink);
  background-color: var(--color-linen);   /* apothecary paper — foundation §2.2 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: var(--weight-semi);
  line-height: 1.15;
  color: var(--color-bark);
}

/* Headings map onto the type scale; templates may override per-zone. */
h1 { font-size: var(--text-3xl); line-height: var(--leading-3xl); }
h2 { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
h3 { font-size: var(--text-xl);  line-height: var(--leading-xl); }
h4 { font-size: var(--text-lg);  line-height: var(--leading-lg); }

p {
  max-width: 70ch;   /* readable measure for body copy */
}

a {
  color: var(--color-trust);   /* teal-pine link colour — reads "clinical/credible" */
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-bark);
}

/* Small print / legal microcopy convention (foundation §2.3): present, honest,
   never hidden, never shouting. */
small,
.text-micro {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--color-ink-muted);
}

/* ---------------------------------------------------------------------------
   3. ACCESSIBLE FOCUS STATES
   --------------------------------------------------------------------------- */

/* Visible focus only for keyboard users (focus-visible), high-contrast against
   the linen/sage palette. Trust-teal ring with offset so it never sits on top of
   the element edge. Do NOT remove outlines without an equivalent replacement. */
:focus-visible {
  outline: 3px solid var(--color-trust);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Mouse users get no outline (focus-visible handles keyboard). */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---------------------------------------------------------------------------
   4. CONTAINER + 12-COL GRID  (foundation §2.4)
   --------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);   /* 1200px */
  margin-inline: auto;
  padding-inline: var(--gutter);     /* 24px desktop */
}

@media (max-width: 640px) {
  .container {
    padding-inline: var(--space-4);  /* 16px outer margin on mobile (foundation §2.4) */
  }
}

/* 12-col grid. Default desktop = 12 tracks; helpers below collapse it
   responsively. Children opt into spans via .col-N or the product-grid helper. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* Column-span helpers (desktop). */
.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-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* Product grid: 4-up desktop / 3-up tablet / 2-up mobile (foundation §2.4). */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

/* On mobile the generic 12-col grid collapses to a single column by default;
   templates re-introduce multi-column where space allows. */
@media (max-width: 640px) {
  .grid > [class*="col-"] {
    grid-column: span 12;
  }
}

/* ---------------------------------------------------------------------------
   5. UTILITIES
   --------------------------------------------------------------------------- */

/* Screen-reader-only content (e.g. labels for icon-only buttons like the cart
   icon). Visually hidden but available to assistive tech — used heavily by the
   chrome partial so every icon control has an accessible name. */
.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;
}

/* Skip-to-content link: hidden until focused, then visible top-left. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--color-paper);
  color: var(--color-trust);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  transform: translateY(-200%);
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translateY(0);
}

/* Hairline divider. */
.hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin-block: var(--space-5);
}

/* Generic stack spacing helper. */
.stack > * + * {
  margin-top: var(--space-4);
}