/*
 * Base: scale, reset, typography, layout helpers.
 * Colours and fonts are NEVER defined here. They come from tokens.css (generated from docs/brand-tokens.json):
 * --color-*, --font-*, --btn-*, --badge-*. Tints and shadows below are color-mix() of those tokens only.
 * Mobile-first: written for 360px, scaled up with min-width queries (30rem, 48rem, 64rem, 80rem).
 */
@layer reset, base, layout, components, utilities;

:root {
  /* spacing (4px grid, in rem) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section-y: clamp(3rem, 2rem + 5vw, 6rem);

  /* type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  --text-4xl: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  --text-5xl: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);

  /* shape */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  /* elevation: tints of the text token, never new colours */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-text-strong) 8%, transparent);
  --shadow-md: 0 8px 24px -10px color-mix(in srgb, var(--color-text-strong) 20%, transparent);
  --shadow-lg: 0 24px 48px -18px color-mix(in srgb, var(--color-text-strong) 28%, transparent);
  --scrim: color-mix(in srgb, var(--color-text-strong) 55%, transparent);

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 0.15s;
  --dur: 0.25s;

  /* sizing */
  --tap: 2.75rem; /* 44px minimum tap target */
  --control: 3rem; /* 48px form controls and buttons */
  --container: 76rem;
  --gutter: 1rem;
  --header-h: 4rem;

  --z-header: 50;
  --z-dialog: 100;
}

@media (min-width: 48rem) {
  :root { --gutter: 1.5rem; }
}
@media (min-width: 64rem) {
  :root { --gutter: 2rem; }
}
/* the full header (logo, nav, actions) from 68.75rem (1100px); the drawer below */
@media (min-width: 68.75rem) {
  :root { --header-h: 5rem; }
}

/* Dark surfaces the live site uses (home, menus, footer). tokens.css sets the dark values;
   this maps the few light-only tokens onto their dark equivalents (no new colours). */
@layer base {
  [data-theme="dark"] {
    color-scheme: dark;
    --color-text-strong: var(--color-text);
    --color-subtle-text: var(--color-muted-text);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-text);
    --color-input-border: var(--color-border);
    --color-footer-text: var(--color-muted-text);
    --color-footer-heading: var(--color-text);
    --color-header-text: var(--color-text);
    background: var(--color-background);
    color: var(--color-text);
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
  body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  img, svg, video { display: block; max-width: 100%; }
  /* <picture> only chooses the file (AVIF / WebP); it takes no part in layout, so the <img> sizes against its container */
  picture { display: contents; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  a { color: inherit; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  summary { cursor: pointer; }
  [hidden] { display: none !important; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
}

@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-background);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /* body copy first, then headings: strong, tight, scaled fluidly */
  /* phones: the homepage hero stays at 2.25rem at most */
  @media (max-width: 29.99rem) { body { --fs-hero: 2.25rem; } } /* on body: tokens.css is unlayered, so a :root rule here would lose */
  h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; color: var(--color-text-strong); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
  h1 { font-family: var(--font-page-title); font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }
  h4 { font-size: var(--text-lg); letter-spacing: 0; }
  p { text-wrap: pretty; max-width: 68ch; }
  a { text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
  :where(p, li, dd) a:not([class]) { color: var(--color-link); }
  :where(p, li, dd) a:not([class]):hover { color: var(--color-link-hover); }
  strong { font-weight: 600; }
  small { font-size: var(--text-sm); }
  hr { border: 0; border-top: 1px solid var(--color-border); }
  address { font-style: normal; }
  ::selection { background: var(--color-primary); color: var(--btn-primary-text); }

  :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }
  :focus:not(:focus-visible) { outline: none; }

  /* a text style for small uppercase labels */
  .eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-link); }
  .lead { font-size: var(--text-lg); line-height: 1.55; color: var(--color-muted-text); max-width: 56ch; }
  .muted { color: var(--color-muted-text); }
  .subtle { color: var(--color-subtle-text); }
  .display { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.03em; font-weight: 600; color: var(--color-text-strong); }
}

@layer layout {
  .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
  .site-main { flex: 1 0 auto; min-width: 0; }
  .section { padding-block: var(--section-y); }
  .section--tight { padding-block: var(--space-8); }
  .section--surface { background: var(--color-surface); }
  .stack > * + * { margin-top: var(--stack, var(--space-4)); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--space-3)); }
  .grid { display: grid; gap: var(--grid-gap, var(--space-4)); }

  /* product and category grids: one column on phones (big imagery), then as many as fit */
  .grid--products { --grid-gap: var(--space-8) var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
  .grid--categories { --grid-gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
}

@layer utilities {
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .skip-link { position: fixed; top: var(--space-2); left: var(--space-2); z-index: calc(var(--z-dialog) + 1); transform: translateY(-200%); opacity: 0; pointer-events: none; background: var(--color-text-strong); color: var(--color-background); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; }
  .skip-link:focus { transform: none; opacity: 1; pointer-events: auto; }
  .text-center { text-align: center; }
  .nowrap { white-space: nowrap; }
  .mt-0 { margin-top: 0 !important; }
}

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

/* Page transitions: the old page fades out and the new one wipes in from the top, using the shared --ease.
   Cross-document View Transitions are CSS only: browsers without them simply navigate, nothing waits for JS,
   and reduced motion turns them off. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-fade-out 0.24s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-wipe-in 0.48s var(--ease) both; }
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-wipe-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }