/* Pantri · Hearth design tokens · CSS custom properties
 * Generated from the brand book (brand.pantri.app). Light is the default; dark is opt-in via
 * class="dark" or data-theme="dark" on <html>. Do not follow prefers-color-scheme on the List screen. */
:root {
  --color-paper: #FAF6F0; /* Paper: Page background */
  --color-raised: #FFFFFF; /* Raised: Rows, sheets, inputs */
  --color-sunken: #F2ECE3; /* Sunken: Section heads, sub-bars */
  --color-hairline: #DED4C6; /* Hairline: Row dividers. Decorative only, never the only edge of a control */
  --color-field-edge: #8E8377; /* Field edge: Input borders, checkboxes, any edge that must be seen (3:1) */
  --color-ink: #1E1914; /* Ink: Item names, figures, headings */
  --color-ink-2: #5A5047; /* Ink 2: Metadata, ticked rows */
  --color-ink-3: #6B6157; /* Ink 3: Captions, provenance (“Coles, checked 7 Oct”) */
  --color-clay: #C4501F; /* Clay: The seed, illustration, display type 24px and up. Never small text */
  --color-action: #A63E14; /* Action: The one primary button per screen, links, active tab */
  --color-action-pressed: #8A3310; /* Action pressed: Pressed state of the primary button */
  --color-on-action: #FFFFFF; /* On action: Text and icons on an Action fill */
  --color-cocoa: #2A211B; /* Cocoa: Footer, cookie banner, dark bands */
  --color-saffron: #E9B44C; /* Saffron: Highlight fills behind ink, illustration. Never text on Paper */
  --color-sage: #6F8A5E; /* Sage: Illustration only */
  --color-good-price: #1F6F43; /* Good price: “$1.10 less”, always with words */
  --color-price-rise: #B4342B; /* Price rise: “40c more”, errors, always with words */
  --color-coles: #C5141A; /* Coles: 3px rule + name only */
  --color-woolworths: #0B7A35; /* Woolworths: 3px rule + name only */
  --color-aldi: #0B57B0; /* ALDI: 3px rule + name only */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display-settings: "opsz" 72, "SOFT" 100, "WONK" 0;
  --font-figures: tabular-nums lining-nums;
  --text-display-size: 2.75rem; --text-display-line: 2.875rem; --text-display-weight: 600;
  --text-h1-size: 2rem; --text-h1-line: 2.25rem; --text-h1-weight: 600;
  --text-screen-title-size: 1.625rem; --text-screen-title-line: 1.875rem; --text-screen-title-weight: 600;
  --text-row-name-size: 1.062rem; --text-row-name-line: 1.375rem; --text-row-name-weight: 600;
  --text-body-size: 1rem; --text-body-line: 1.5rem; --text-body-weight: 400;
  --text-figure-size: 1.062rem; --text-figure-line: 1.375rem; --text-figure-weight: 600;
  --text-meta-size: 0.8125rem; --text-meta-line: 1.125rem; --text-meta-weight: 400;
  --text-label-size: 0.6875rem; --text-label-line: 0.875rem; --text-label-weight: 600;
  --text-label-tracking: 0.08em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius-icon: 22.37%;
  --duration-row: 120ms;
  --duration-sheet: 220ms;
  --duration-section: 300ms;
  --duration-hero: 400ms;
  --ease-hearth: cubic-bezier(.2,.8,.2,1);
  --row-min-height: 64px;
  --tap-min: 44px;
  --hairline-width: 1px;
  --retailer-rule-width: 3px;
  --gutter: 20px;
}

.dark, [data-theme="dark"] {
  --color-paper: #1A1511;
  --color-raised: #241D18;
  --color-sunken: #14100D;
  --color-hairline: #3A3029;
  --color-field-edge: #8F8274;
  --color-ink: #F6EFE6;
  --color-ink-2: #C9BDB0;
  --color-ink-3: #A89B8C;
  --color-clay: #E2703F;
  --color-action: #EE8A5C;
  --color-action-pressed: #F4A27C;
  --color-on-action: #1E1914;
  --color-cocoa: #0F0C0A;
  --color-saffron: #E9B44C;
  --color-sage: #7E9A6C;
  --color-good-price: #5CC48A;
  --color-price-rise: #F08A80;
  --color-coles: #F2666B;
  --color-woolworths: #3FC46B;
  --color-aldi: #5A9BE8;
  --text-row-name-size: 1.125rem; --text-row-name-weight: 700; /* one size and one weight up in dark */
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-row: 0ms; --duration-sheet: 0ms; --duration-section: 0ms; --duration-hero: 0ms; }
}

.tabular { font-variant-numeric: tabular-nums lining-nums; }