/*
 * Lofvi design tokens: "white & ink" (owner decision, 25 September 2026).
 *
 * White and a barely warm off-white for surfaces, near-black ink for text
 * and the mark, light grey hairlines and one soft sage accent. Category
 * drawings sit on one pale sage field so a category reads as a category;
 * product photos always sit on white. No other colour: the photographs
 * bring it. Serif display type at regular weight, a quiet grotesque for
 * everything else, square flat geometry and one vertical rhythm.
 *
 * Components read these custom properties only.
 * The @font-face rules live in base.html so font URLs carry content hashes.
 */

/* Metric-matched fallbacks so the font swap barely moves the layout. */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  size-adjust: 96%;
  ascent-override: 98%;
  descent-override: 26%;
}

@font-face {
  font-family: "Hanken Grotesk Fallback";
  src: local("Arial");
  size-adjust: 97%;
  ascent-override: 98%;
  descent-override: 26%;
}

:root {
  color-scheme: light;

  /* ── Colour: white and ink ─────────────────────────────────────────── */
  --paper: #ffffff; /* page */
  --paper-soft: #f6f6f4; /* surfaces: bands, footer, fields, offer box */
  --paper-card: #ffffff; /* product photo fields and cards: always white */
  --paper-raised: #ffffff; /* popovers, menus */
  --paper-input: #f6f6f4; /* search and form fields at rest */
  --paper-2: #efefec; /* hover and selected rows on a surface */
  --paper-3: #e4e4e0;

  --ink: #111111;
  --ink-deep: #000000;
  --text: #111111;
  --text-body: #3d3d3a; /* 11:1 on white */
  --text-muted: #6b6b66; /* 5.4:1 on white, 4.9:1 on --paper-soft and --tile */
  --text-faint: #72726d; /* 4.8:1 on white; non-essential text only */

  --line: #e4e4e0;
  --line-faint: #eeeeeb;
  --line-strong: #cbcbc6;
  --line-solid: #e4e4e0;

  /* The one accent: soft sage (the dot of the mark). --sage is for
     graphics (3:1 on white); text in the accent uses --sage-deep (AA). */
  --sage: #7f9a86;
  --sage-deep: #4d6955;
  /* Pale sage behind every category drawing (and nothing else that is
     clickable), so categories read apart from white product cards. */
  --tile: #eef2ef;
  --tile-hover: #e4ebe6;

  /* Functional states only (forms, account): never decoration. */
  --danger: #a3322b; /* 6.4:1 on white */
  --success: var(--sage-deep);

  /* ── Type ──────────────────────────────────────────────────────────── */
  --font-editorial: 'Newsreader', 'Newsreader Fallback', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body: 'Hanken Grotesk', 'Hanken Grotesk Fallback', ui-sans-serif, system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* A 1.25 scale from 16 px, fluid for display sizes. */
  --text-display: clamp(2.75rem, 1.6rem + 4.2vw, 5rem);
  --text-hero: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);
  --text-h1: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  --text-h2-lg: clamp(2rem, 1.5rem + 1.8vw, 2.875rem);
  --text-h2: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
  --text-h3: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  --text-h4: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --text-title-sm: 1.75rem;
  --text-heading-sm: 1.625rem;
  --text-subtitle: 1.25rem;
  --text-lead: 1.1875rem;
  --text-body-lg: 1.0625rem;
  --text-body: 1rem;
  --text-ui: 0.9375rem;
  --text-sm: 0.875rem;
  --text-meta: 0.84375rem;
  --text-xs: 0.8125rem;
  --text-caption: 0.75rem;
  --text-label: 0.75rem;

  --tracking-display: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.02em;
  --tracking-eyebrow: 0.08em;

  --leading-title: 1.06;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  /* ── Space: 4px canon ──────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --container-max: 1440px;
  --measure: 62ch;
  --touch: 44px;

  /* ── Geometry: flat and square ─────────────────────────────────────── */
  --radius: 0;
  --shadow: 0 1px 2px rgb(17 17 17 / 4%), 0 16px 40px -12px rgb(17 17 17 / 14%);

  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 560ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Rhythm: six semantic steps, compressed in step on small screens ─ */
  --gutter: var(--space-10);
  --header-y: var(--space-10);
  --header-y-end: var(--space-12);
  --section-y: var(--space-20);
  --group-gap: var(--space-20);
  --grid-gap-x: var(--space-5);
  --grid-gap-y: var(--space-12);
  --stack-xs: var(--space-2);
  --stack-sm: var(--space-3);
  --stack-md: var(--space-6);
}

@media (max-width: 1180px) {
  :root {
    --gutter: var(--space-8);
  }
}

@media (max-width: 768px) {
  :root {
    --gutter: var(--space-5);
    --header-y: var(--space-8);
    --header-y-end: var(--space-10);
    --section-y: var(--space-14);
    --group-gap: var(--space-14);
    --grid-gap-x: var(--space-4);
    --grid-gap-y: var(--space-10);
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: var(--space-4);
    --header-y: var(--space-6);
    --header-y-end: var(--space-8);
    --section-y: var(--space-12);
    --group-gap: var(--space-12);
    --grid-gap-x: var(--space-3);
    --grid-gap-y: var(--space-8);
  }
}