/* MealieShopper Fresh — generated from tokens.json */

/* The selectors are the app's own: data-theme="dark" on <html> for the basil dark theme, plus data-dark-bg="grey" for
   the graphite one (static/theme.js). The --shadow-ink, --tabbar-rgb and --ease lines keep the rest of static/styles.css
   working unchanged; they are not design tokens. Fonts: the app's own @font-face rules for Manrope and Inter. */

:root {
  color-scheme: light;
  --shadow-ink: 15, 35, 24;
  --tabbar-rgb: 255, 255, 255;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --primary: #007d41;
  --primary-strong: #006634;
  --on-primary: #ffffff;
  --selection: #e2f8e9;
  --selection-border: #a3e4bd;
  --lemon: #ffd23f;
  --on-lemon: #2e2400;
  --tomato: #ff5a36;
  --on-tomato: #2b0800;
  --mint: #b9f3d0;
  --info: #0a63c9;
  --bg: #f2f9f4;
  --surface: #ffffff;
  --surface-muted: #e8f5ec;
  --text: #0f2318;
  --muted: #4b6255;
  --placeholder: #5d7466;
  --border: #d0e6d8;
  --border-strong: #acd0b9;
  --success-text: #006634;
  --success-bg: #e2f8e9;
  --success-border: #a3e4bd;
  --danger: #c41d1d;
  --danger-bg: #fff0ec;
  --danger-border: #f8b3a6;
  --warning-text: #784700;
  --warning-bg: #fff5cc;
  --warning-border: #f2b200;
  --topbar-bg: rgba(255, 255, 255, 0.96);
  --topbar-glass: rgba(255, 255, 255, 0.86);
  --gate-bg: rgba(242, 249, 244, 0.96);
  --tabbar-solid: rgba(255, 255, 255, 0.97);
  --tabbar-tint: rgba(0, 125, 65, 0.14);
  --tabbar-ink: #34493d;
  --tabbar-ink-active: #00592b;
  --tabbar-border: rgba(255, 255, 255, 0.7);
  --ring: rgba(0, 125, 65, 0.22);
  --page-glow: rgba(0, 200, 100, 0.12);
  --code-on-message: rgba(255, 255, 255, 0.7);
  --flag-ring: rgba(15, 35, 24, 0.25);
  --offer-50: #087f39;
  --on-offer-50: #ffffff;
  --offer-35: #7ddb3f;
  --on-offer-35: #0e2a06;
  --offer-20: #ffd23f;
  --on-offer-20: #2e2400;
  --offer-10: #ff8c1a;
  --on-offer-10: #2e1400;
  --offer-1: #e0322b;
  --on-offer-1: #ffffff;
  --offer-0: #e6ece8;
  --on-offer-0: #33413a;
  --offer-0-border: #c7d2cb;
  --cat-groente_fruit-bg: #dcfae2;
  --cat-groente_fruit-line: #22b84a;
  --cat-vlees-bg: #ffe2de;
  --cat-vlees-line: #ef4335;
  --cat-vis-bg: #dbefff;
  --cat-vis-line: #1b8ce0;
  --cat-kaas_vleeswaren-bg: #ffefd2;
  --cat-kaas_vleeswaren-line: #f5a21f;
  --cat-zuivel_eieren-bg: #fff7c7;
  --cat-zuivel_eieren-line: #efc000;
  --cat-brood_bakkerij-bg: #f8e7d0;
  --cat-brood_bakkerij-line: #c97f2a;
  --cat-maaltijden-bg: #fbdff0;
  --cat-maaltijden-line: #d4439e;
  --cat-sauzen_conserven-bg: #ffe6d1;
  --cat-sauzen_conserven-line: #ff7516;
  --cat-ontbijt_beleg-bg: #f5eed2;
  --cat-ontbijt_beleg-line: #b39a26;
  --cat-snacks_snoep-bg: #eee2ff;
  --cat-snacks_snoep-line: #9a58f2;
  --cat-frisdrank-bg: #d3f7f2;
  --cat-frisdrank-line: #10b3a6;
  --cat-koffie_thee-bg: #efe1d5;
  --cat-koffie_thee-line: #8d5a30;
  --cat-bier_wijn-bg: #f3ddf7;
  --cat-bier_wijn-line: #a33cbc;
  --cat-diepvries-bg: #d9f1ff;
  --cat-diepvries-line: #38adf2;
  --cat-huishouden-bg: #e2eaf3;
  --cat-huishouden-line: #5a7899;
  --cat-drogisterie-bg: #d6f4ed;
  --cat-drogisterie-line: #1fa98e;
  --cat-baby-bg: #ffe1ec;
  --cat-baby-line: #f0619b;
  --cat-huisdier-bg: #f5e6d8;
  --cat-huisdier-line: #b77a42;
  --cat-overig-bg: #eceeed;
  --cat-overig-line: #87928c;
  --accent-blue: #0b6be0;
  --accent-indigo: #4f46e5;
  --accent-violet: #7c3aed;
  --accent-purple: #b51cc4;
  --accent-pink: #e0186c;
  --accent-orange: #e8590c;
  --accent-teal: #0d9488;
  --accent-bordeaux: #a3123f;
  --accent-graphite: #475569;
  --shadow-xs: 0 1px 2px rgba(15, 35, 24, 0.06);
  --shadow-sm: 0 1px 2px rgba(15, 35, 24, 0.05), 0 2px 8px rgba(15, 35, 24, 0.05);
  --shadow-md: 0 2px 4px rgba(15, 35, 24, 0.04), 0 10px 28px rgba(15, 35, 24, 0.10);
  --shadow-lg: 0 4px 8px rgba(15, 35, 24, 0.05), 0 28px 64px rgba(15, 35, 24, 0.18);
  --btn-shadow: 0 1px 2px rgba(0, 102, 52, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --btn-shadow-hover: 0 4px 14px rgba(0, 125, 65, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-control: 12px;
  --radius-card: 18px;
  --radius-dialog: 24px;
  --radius-pill: 999px;
  --control-height: 44px;
  --control-height-sm: 36px;
  --topbar-height: 64px;
  --tabbar-h: 82px;
  --shell-max: 1120px;
  --box-max: 680px;
  --thumb: 56px;
  --avatar: 32px;
  --avatar-lg: 44px;
  --avatar-xl: 96px;
  --font-heading: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --shadow-ink: 0, 0, 0;
  --tabbar-rgb: 18, 35, 26;
  --primary: #3ee08a;
  --primary-strong: #8af2b9;
  --on-primary: #03200f;
  --selection: #123d27;
  --selection-border: #1f6a43;
  --lemon: #ffd84d;
  --tomato: #ff7454;
  --mint: #1f5a3c;
  --info: #6cb8ff;
  --bg: #0b1711;
  --surface: #12231a;
  --surface-muted: #193024;
  --text: #e8f6ee;
  --muted: #9fbcab;
  --placeholder: #88a795;
  --border: #26412f;
  --border-strong: #38593f;
  --success-text: #8ff0bb;
  --success-bg: #12301f;
  --success-border: #1f6a43;
  --danger: #ff8a7a;
  --danger-bg: #3b1612;
  --danger-border: #7d2a22;
  --warning-text: #ffcf5c;
  --warning-bg: #33280a;
  --warning-border: #b38600;
  --topbar-bg: rgba(11, 23, 17, 0.96);
  --topbar-glass: rgba(11, 23, 17, 0.88);
  --gate-bg: rgba(11, 23, 17, 0.96);
  --tabbar-solid: rgba(18, 35, 26, 0.97);
  --tabbar-tint: rgba(62, 224, 138, 0.18);
  --tabbar-ink: #c3d9cb;
  --tabbar-ink-active: #c4f5da;
  --tabbar-border: rgba(255, 255, 255, 0.12);
  --ring: rgba(62, 224, 138, 0.3);
  --page-glow: rgba(62, 224, 138, 0.1);
  --code-on-message: rgba(0, 0, 0, 0.3);
  --flag-ring: rgba(255, 255, 255, 0.35);
  --cat-groente_fruit-bg: #153e23;
  --cat-vlees-bg: #3a291f;
  --cat-vis-bg: #14363e;
  --cat-kaas_vleeswaren-bg: #3b3a1b;
  --cat-zuivel_eieren-bg: #3a3f15;
  --cat-brood_bakkerij-bg: #33341d;
  --cat-maaltijden-bg: #352932;
  --cat-sauzen_conserven-bg: #3d3219;
  --cat-ontbijt_beleg-bg: #2f381c;
  --cat-snacks_snoep-bg: #2a2d41;
  --cat-frisdrank-bg: #123d33;
  --cat-koffie_thee-bg: #282d1e;
  --cat-bier_wijn-bg: #2c2837;
  --cat-diepvries-bg: #193c41;
  --cat-huishouden-bg: #1f3231;
  --cat-drogisterie-bg: #143b2f;
  --cat-baby-bg: #3a2e31;
  --cat-huisdier-bg: #303321;
  --cat-overig-bg: #27372f;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 32px 72px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --btn-shadow-hover: 0 4px 16px rgba(62, 224, 138, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

:root[data-theme="dark"][data-dark-bg="grey"] {
  --tabbar-rgb: 27, 28, 30;
  --selection: #163a29;
  --selection-border: #22603f;
  --bg: #121314;
  --surface: #1b1c1e;
  --surface-muted: #232527;
  --text: #e8e9ea;
  --muted: #a6a8ab;
  --placeholder: #8f9194;
  --border: #343638;
  --border-strong: #47494c;
  --success-bg: #16301f;
  --topbar-bg: rgba(18, 19, 20, 0.96);
  --topbar-glass: rgba(18, 19, 20, 0.88);
  --gate-bg: rgba(18, 19, 20, 0.96);
  --tabbar-solid: rgba(27, 28, 30, 0.97);
  --tabbar-ink: #cacbcd;
  --cat-groente_fruit-bg: #1c3826;
  --cat-vlees-bg: #412322;
  --cat-vis-bg: #1b3041;
  --cat-kaas_vleeswaren-bg: #42341e;
  --cat-zuivel_eieren-bg: #413a19;
  --cat-brood_bakkerij-bg: #3a2e20;
  --cat-maaltijden-bg: #3c2335;
  --cat-sauzen_conserven-bg: #442c1d;
  --cat-ontbijt_beleg-bg: #36331f;
  --cat-snacks_snoep-bg: #322744;
  --cat-frisdrank-bg: #193736;
  --cat-koffie_thee-bg: #302721;
  --cat-bier_wijn-bg: #33223a;
  --cat-diepvries-bg: #203644;
  --cat-huishouden-bg: #262d34;
  --cat-drogisterie-bg: #1c3532;
  --cat-baby-bg: #412834;
  --cat-huisdier-bg: #372d24;
  --cat-overig-bg: #2e3132;
}