/* ==========================================================================
   OnlyDogFood - Design Tokens (single source of visual truth)
   Warm off-white surfaces, near-black ink, two-colour accent system:
   spruce green (editorial / identity) + retriever gold (primary actions,
   score and price moments), plus the functional score-band scale.
   LIGHT MODE ONLY - permanent decision (2026-07-15): no dark variants, no
   prefers-color-scheme. Semantic names kept for hygiene.
   Nothing outside this file hardcodes a colour, size, radius or shadow.
   ========================================================================== */

/* Fonts are self-hosted @font-face in assets/css/fonts.css (Fraunces + Manrope,
   variable). Inter was retired with the v2 redesign - the tokens below are the
   single source of truth for the two faces. */

:root {
	/* --- Ink (text) --- */
	--odf-ink:   #16181d;   /* headings, primary text */
	--odf-ink-2: #565a63;   /* body copy, secondary */
	--odf-ink-3: #686c75;   /* captions, muted meta - darkened from #8a8d95 (3.32:1, failed WCAG AA). Nudged again from #6b6f78 to clear the GREEN-SOFT wash background too (was 4.39:1 there). Now >=4.59:1 on every surface it appears on: white 5.26, warm surface 5.04, green wash 4.59, tint 4.67. Still the lightest ink token, so the hierarchy holds. */

	/* --- Surfaces --- */
	--odf-surface: #fbfaf7; /* warm off-white page canvas */
	--odf-card:    #ffffff; /* cards, tables, inputs */
	--odf-line:    #e9e5dc; /* hairlines, borders */
	--odf-tint:    #f5f1e8; /* alternating bands, subtle fills */

	/* --- Accent 1: spruce green (editorial / identity - eyebrows, links,
	       section labels, verdict border, dark bands, secondary buttons) --- */
	--odf-green:      #17614a;
	--odf-green-deep: #0f4a37;
	--odf-green-soft: #e7f2ed;
	--odf-green-grad: linear-gradient(135deg, #0f4a37, #17614a);

	/* --- Accent 2: retriever gold (RESERVED: primary CTAs, score / star
	       moments, price highlights - nothing else) --- */
	--odf-gold:      #c98a1e;
	--odf-gold-deep: #a86f10;
	--odf-gold-soft: #fbf2df;

	/* --- Score bands (functional scale - never decorative; number + label
	       ALWAYS accompany the colour) --- */
	--odf-band-exceptional: #146c43;
	--odf-band-verygood:    #3f9142;
	--odf-band-good:        #8a9a1f;
	--odf-band-average:     #d9930d;
	--odf-band-poor:        #e07514;
	--odf-band-avoid:       #c93a2e;

	/* --- Food-type categorical palette --- the ONE place distinct categorical
	       colours are sanctioned (the /dog-food/ type-mix diagram). A considered
	       on-brand set - spruce green, teal, olive, gold and warm neutrals - NOT a
	       rating scale and NEVER used to colour a score. Every value is mid-tone
	       so it stays legible as a 10px bar segment and an 8px legend dot. */
	--odf-type-dry:           #1f6b52;  /* spruce green (identity - the largest bucket) */
	--odf-type-cold-pressed:  #2f9c8b;  /* teal */
	--odf-type-wet:           #c98a1e;  /* retriever gold */
	--odf-type-fresh-cooked:  #7f8b33;  /* olive */
	--odf-type-raw:           #b96a43;  /* warm clay */
	--odf-type-veterinary:    #4a7c86;  /* slate teal (clinical) */
	--odf-type-air-dried:     #a98a5b;  /* tan */
	--odf-type-freeze-dried:  #9aa86a;  /* sage */
	--odf-type-mixer:         #8a8272;  /* warm grey */
	--odf-type-complementary: #5f8a6f;  /* muted green */
	--odf-type-treat:         #d0a24e;  /* soft amber */

	/* --- Typography --- */
	--odf-font-sans:    "Manrope", system-ui, "Segoe UI", sans-serif;
	--odf-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--odf-display-weight: 800;

	/* Type scale: 12 / 13 / 14 / 16 / 19 / 24 / 32 / 42 px as rem */
	--odf-fs-xs:   0.75rem;    /* 12 */
	--odf-fs-sm:   0.8125rem;  /* 13 */
	--odf-fs-md:   0.875rem;   /* 14 */
	--odf-fs-base: 1rem;       /* 16 */
	--odf-fs-lg:   1.1875rem;  /* 19 */
	--odf-fs-xl:   1.5rem;     /* 24 */
	--odf-fs-2xl:  2rem;       /* 32 */
	--odf-fs-3xl:  2.625rem;   /* 42 */

	/* Stat-tile value sizes (founder review 2026-07-17 DENSITY pass, rule 3:
	   one value size ~28px, --big capped at 34px - big numbers stopped
	   shouting). Only .odf-stat__value consumes these. */
	--odf-fs-stat:     1.75rem;   /* 28 */
	--odf-fs-stat-big: 2.125rem;  /* 34 */

	--odf-lh-tight: 1.12;
	--odf-lh-snug:  1.35;
	--odf-lh-base:  1.65;

	--odf-tracking-tight: -0.02em;
	--odf-tracking-wide:  0.08em;

	/* --- Spacing scale (4px base) --- */
	--odf-sp-1:  0.25rem;   /*  4 */
	--odf-sp-2:  0.5rem;    /*  8 */
	--odf-sp-3:  0.75rem;   /* 12 */
	--odf-sp-4:  1rem;      /* 16 */
	--odf-sp-5:  1.5rem;    /* 24 */
	--odf-sp-6:  2rem;      /* 32 */
	--odf-sp-7:  2.5rem;    /* 40 */
	--odf-sp-8:  3rem;      /* 48 */
	--odf-sp-9:  3.5rem;    /* 56 */
	--odf-sp-10: 4rem;      /* 64 */
	--odf-sp-12: 6rem;      /* 96 */

	/* One vertical rhythm for page sections (shrinks on mobile, see below).
	   DENSITY pass 2026-07-17 rule 1 set this to 48px. REDESIGN v2 rollout
	   (2026-07-19): +~17% air site-wide (founder brief "increase whitespace
	   15-20%") -> 56px. Mobile still tightens to 32px below. */
	--odf-section-gap: var(--odf-sp-9);

	/* --- Radii --- REDESIGN v2 rollout: softer, larger corners to match the
	   homepage. Small elements keep 10/12; CARDS route through --odf-radius-card
	   (now 18px, in the brief's 18-22 range); large panels/tables/media use -lg
	   (16) and hero-scale surfaces -xl (20) / --odf-r-lg (20) / --odf-r-xl (28). */
	--odf-radius-sm:   10px;
	--odf-radius:      12px;
	--odf-radius-lg:   16px;
	--odf-radius-xl:   20px;
	--odf-radius-pill: 999px;
	/* Large "soft" radii promoted from the homepage block so any page's hero,
	   search bar or feature card can round like the homepage. */
	--odf-r-lg: 20px;
	--odf-r-xl: 28px;

	/* --- Numeric aliases (the plugin's shortcode CSS consumes these names;
	       they only ever point at the canonical tokens above) --- */
	--odf-r-10:  var(--odf-radius-sm);
	--odf-r-14:  var(--odf-radius-lg);
	--odf-fs-12: var(--odf-fs-xs);
	--odf-fs-13: var(--odf-fs-sm);
	--odf-fs-14: var(--odf-fs-md);
	--odf-fs-19: var(--odf-fs-lg);

	/* --- Elevation --- REDESIGN v2 rollout (2026-07-19): the brief asks for
	   "softer shadows" site-wide. --shadow-soft is the new resting card shadow
	   (gentle + diffuse, subtle enough for dense grids); --shadow-lift is the
	   hover state (a clear but soft rise). --shadow / --shadow-xs kept for the
	   many places that referenced them. --- */
	--odf-shadow:      0 1px 2px rgba(22, 24, 29, .05), 0 8px 24px rgba(22, 24, 29, .06);
	--odf-shadow-xs:   0 1px 2px rgba(22, 24, 29, .05);
	--odf-shadow-soft: 0 2px 6px -2px rgba(22, 24, 29, .05), 0 14px 30px -16px rgba(22, 24, 29, .13);
	--odf-shadow-lift: 0 6px 14px -6px rgba(22, 24, 29, .10), 0 24px 46px -22px rgba(22, 24, 29, .22);

	/* --- Component tokens (layout-language Phase 1b): ONE card radius, ONE
	       card shadow, named widths. Every primitive routes through these -
	       never through the raw scale values above. REDESIGN v2: rounder + softer
	       so every .odf-card across the site gets the homepage feel in one place. --- */
	--odf-radius-card: 18px;
	--odf-shadow-card: var(--odf-shadow-soft);

	/* --- Focus ring (identity green - gold stays reserved for CTAs) --- */
	--odf-ring: 0 0 0 3px rgba(23, 97, 74, .3);
	/* Focus halo for TEXT/SEARCH FIELDS only. --odf-ring above is a 30%-opacity
	   green ring; sitting immediately outside a solid green border on a pill
	   radius it read as TWO concentric outlines (the "double border"). A flat
	   tint reads as one thickened edge instead. Buttons and links keep
	   --odf-ring - they need the higher-contrast ring for accessibility. */
	--odf-ring-field: 0 0 0 3px var(--odf-green-soft);

	/* --- Layout --- */
	--odf-container: 1200px;
	--odf-container-narrow: 1080px;
	--odf-w-contained: var(--odf-container);   /* the one contained width */
	--odf-w-prose: 68ch;                       /* the one prose measure */
	--odf-measure: var(--odf-w-prose);         /* legacy alias - do not use in new code */

	/* --- Stacking order ---
	   Every z-index in the theme comes from here. Ad-hoc numbers are what caused
	   the search type-ahead to paint OVER the open nav menu: .odf-header is
	   `position:sticky` with a z-index, so it forms a stacking context, and any
	   page-level element with a higher number beats the ENTIRE header - including
	   panels nested inside it, no matter how high their own z-index is. The rule
	   that follows from that: anything in the page body must stay below
	   --odf-z-header; anything inside the header is ranked with --odf-z-nav.

	   Only GLOBAL layers belong here. Small local values (a chip lifted above a
	   card's stretched-link overlay, say) stay as plain numbers - they compete
	   with their own siblings, never with the header. */
	--odf-z-tip:      30;     /* trait tooltips, inline hints */
	--odf-z-popover:  40;     /* PAGE-LEVEL popups: type-ahead, share, filters */
	--odf-z-header:   50;     /* the sticky header (a stacking context) */
	--odf-z-nav:      60;     /* panels INSIDE the header: mega menu, sub-menus */
	--odf-z-toast:    90;
	--odf-z-stickybar: 1000;  /* full-width fixed bars (compare tray) */
	--odf-z-modal:    9999;   /* lightbox / modal overlay */

	/* --- Motion (150-200ms ease-out, no bounce) --- */
	--odf-ease: cubic-bezier(.25, .6, .35, 1);
	--odf-dur:  .18s;
}

/* Tighter section rhythm on phones. */
@media (max-width: 768px) {
	:root { --odf-section-gap: var(--odf-sp-6); }
}

/* Breakpoints (reference): sm 480 - md 768 - lg 1024 - xl 1160 */