/*
 * FarmToyDeals design tokens: "Schuur" (owner decision, 25 September 2026).
 *
 * Milk-white paper, clay-green ink and one barn red that carries the brand:
 * the barn, prices, links, the word "deals" and the main button. Hay is
 * the deal colour (badges, highlights) and always carries ink text; it is
 * never text on milk. Product photos sit on white cards. Headlines in
 * Fraunces (soft, warm serif), everything else in Figtree. Rounded,
 * sturdy geometry with one vertical rhythm on a 4 px canon.
 *
 * Components read these custom properties only.
 * The @font-face rules live in base.html so font URLs carry content hashes.
 * Contrast ratios are WCAG 2.2, measured against the paper they sit on.
 */

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

/* Figtree Fallback: measured against the self-hosted Figtree 400 (scripts/build-site-fonts.py). */
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 99.16%;
  ascent-override: 95.8%;
  descent-override: 25.21%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* ── Colour: milk, ink and barn red ────────────────────────────────── */
  --paper: #fbf6ec; /* page: milk */
  --paper-soft: #f4ebda; /* bands, footer strip, image stage */
  --paper-card: #ffffff; /* product photo fields and cards: always white */
  --paper-raised: #ffffff; /* popovers, menus */
  --paper-input: #ffffff; /* search and form fields */
  --paper-2: #efe6d4; /* hover and selected rows on a surface */
  --paper-3: #e6dac3;

  --ink: #1e2b24; /* clay green: 13.7:1 on milk; the wordmark ink */
  --ink-deep: #121a15;
  --text: #1e2b24;
  --text-body: #34413a; /* 9.9:1 on milk */
  --text-muted: #5e5a4e; /* 6.4:1 on milk */
  --text-faint: #6f6a5c; /* non-essential text only */

  --line: #e6dac3; /* straw */
  --line-faint: #efe6d4;
  --line-strong: #cdbd9f;
  --line-solid: #e6dac3;

  /* The brand colour: barn red. Graphics, prices, links, "deals" and the
     primary button (white text 6.6:1). --red-deep is hover and pressed. */
  --red: #a93226; /* 6.2:1 on milk */
  --red-deep: #8e2a20;
  --on-red: #ffffff;

  /* Deal colour: hay. Badges and highlights with ink text only (7.9:1).
     Hay on milk is 1.7:1: decoration, never text or a lone indicator. */
  --hay: #e8b64c;
  --on-hay: #1e2b24;

  /* Functional states only (forms, account, price history): never decoration. */
  --success: #2f6b3a; /* "lowest price" */
  --danger: #a93226;
  --focus: #1e2b24; /* 2 px focus ring */

  /* ── Type ──────────────────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Fraunces Fallback', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Figtree', 'Figtree Fallback', ui-sans-serif, system-ui, sans-serif;
  /* Fraunces soft axis: the warm, rounded cut that matches the wordmark. */
  --display-settings: "SOFT" 100, "WONK" 0;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display: 700; /* Fraunces headlines */
  --fw-price: 800; /* Fraunces prices */

  /* A 1.25 scale from 16 px, fluid for display sizes. */
  --text-display: clamp(2.75rem, 1.6rem + 4.2vw, 4.75rem);
  --text-h1: clamp(2.125rem, 1.55rem + 2.2vw, 3.25rem);
  --text-h2: clamp(1.75rem, 1.35rem + 1.5vw, 2.375rem);
  --text-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-h4: 1.25rem;
  --text-price: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
  --text-lead: 1.1875rem;
  --text-body-lg: 1.0625rem;
  --text-body: 1rem;
  --text-ui: 0.9375rem;
  --text-sm: 0.875rem;
  --text-xs: 0.8125rem;
  --text-caption: 0.75rem;

  --tracking-display: -0.015em;
  --tracking-snug: -0.01em;
  --tracking-eyebrow: 0.06em;

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

  --numeric: tabular-nums; /* every price and price table */

  /* ── 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: 64ch;
  --touch: 44px;

  /* ── Geometry: rounded and sturdy ──────────────────────────────────── */
  --radius-sm: 8px; /* chips, shop monograms */
  --radius: 14px; /* fields, buttons, image stages, offer rows */
  --radius-lg: 20px; /* cards */
  --radius-badge: 10px 999px 999px 10px; /* deal badge: a tag with one square end */
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgb(30 43 36 / 5%), 0 14px 36px -14px rgb(30 43 36 / 18%);

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

  /* ── Logo ──────────────────────────────────────────────────────────── */
  --logo-header-h: 36px; /* horizontal lock-up height in the header */
  --logo-header-h-sm: 28px;
  --logo-min-w: 120px; /* horizontal lock-up minimum width */

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

/* ── Dark: night green, cream text, light red ─────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #141c17;
    --paper-soft: #1e2821;
    --paper-card: #1e2821;
    --paper-raised: #26312a;
    --paper-input: #1e2821;
    --paper-2: #26312a;
    --paper-3: #2f3b33;
    --ink: #f3ede1; /* 14.9:1 on night */
    --ink-deep: #ffffff;
    --text: #f3ede1;
    --text-body: #ded7c9;
    --text-muted: #b5ad9c; /* 7.8:1 */
    --text-faint: #9a9282;
    --line: #2f3b33;
    --line-faint: #26312a;
    --line-strong: #43514a;
    --line-solid: #2f3b33;
    --red: #e57b66; /* 6.1:1 on night */
    --red-deep: #f0a08f;
    --on-red: #141c17; /* 6.1:1 on light red */
    --hay: #e8b64c;
    --on-hay: #141c17;
    --success: #8ccb93;
    --danger: #e57b66;
    --focus: #e57b66;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 14px 36px -14px rgb(0 0 0 / 60%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141c17;
  --paper-soft: #1e2821;
  --paper-card: #1e2821;
  --paper-raised: #26312a;
  --paper-input: #1e2821;
  --paper-2: #26312a;
  --paper-3: #2f3b33;
  --ink: #f3ede1;
  --ink-deep: #ffffff;
  --text: #f3ede1;
  --text-body: #ded7c9;
  --text-muted: #b5ad9c;
  --text-faint: #9a9282;
  --line: #2f3b33;
  --line-faint: #26312a;
  --line-strong: #43514a;
  --line-solid: #2f3b33;
  --red: #e57b66;
  --red-deep: #f0a08f;
  --on-red: #141c17;
  --hay: #e8b64c;
  --on-hay: #141c17;
  --success: #8ccb93;
  --danger: #e57b66;
  --focus: #e57b66;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 14px 36px -14px rgb(0 0 0 / 60%);
}

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

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

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