/* ============================================================
   Meal Planner — design tokens
   Fonts are self-hosted (no third-party requests, works offline).
   Theme colors come from the planner-theme-palettes skill. Theme ids
   `blush`, `rainbow` and `dark` are v1's saved ids and must never be
   renamed; `neutral` is new in v2.
   ============================================================ */

@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../assets/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../assets/fonts/playfair-display-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../assets/fonts/playfair-display-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* "Easier reading" font (Settings → Comfort). Only downloaded when chosen. */
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/atkinson-hyperlegible-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/atkinson-hyperlegible-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/atkinson-hyperlegible-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/atkinson-hyperlegible-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.3125rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2rem;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem; --space-8: 2.5rem;

  --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(40, 30, 32, 0.04), 0 2px 10px rgba(40, 30, 32, 0.05);
  --shadow-lg: 0 10px 34px rgba(40, 30, 32, 0.16);

  --nav-w: 232px;
  --bar-h: 64px;
  --content-max: 1120px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Blush & Sage (default) ---------- */
:root, [data-theme="blush"] {
  color-scheme: light;
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #FAF7F5;
  --nav-bg: #EFD6D2; --nav-text: #4A2F33; --nav-icon: #9A5E66; --nav-hover-bg: #E9CAC5; --nav-active-bg: #FAF7F5; --nav-active-text: #3B2427;
  --text: #3A2E30; --text-muted: #73666A; --heading: #3A2E30; --link: #5E7A62;
  --border: #EDE3E0; --border-accent: #E1C1C1; --divider: #F2ECEA;
  --btn-primary-bg: #AFC2B0; --btn-primary-text: #22362A; --btn-primary-hover: #9DB49F;
  --btn-secondary-bg: #EFD6D2; --btn-secondary-text: #5A3439; --btn-secondary-hover: #E6C6C1;
  --btn-ghost-text: #5E7A62; --btn-ghost-border: #AFC2B0;
  --accent-1: #E1C1C1; --accent-1-deep: #A86B72; --accent-2: #AFC2B0; --accent-2-deep: #5E7A62;
  --chip-1-bg: #F6E4E1; --chip-1-text: #7A424A; --chip-2-bg: #E4ECE4; --chip-2-text: #3E5A44;
  --chip-3-bg: #F3ECE8; --chip-3-text: #6A5552; --chip-4-bg: #F2E6DA; --chip-4-text: #7A5634;
  --chip-5-bg: #F6E4E1; --chip-5-text: #7A424A; --chip-6-bg: #E4ECE4; --chip-6-text: #3E5A44;
  --chart-1: #E1C1C1; --chart-2: #AFC2B0; --chart-3: #C9979D; --chart-4: #84A088; --chart-5: #D9AFAA; --chart-6: #D4BFA6;
  --chart-edge: #B88A90; --chart-track: #F3ECEA; --progress-track: #F3E8E6; --progress-fill: #AFC2B0;
  --success-bg: #E4ECE4; --success-text: #3E5A44; --warning-bg: #F6E6D3; --warning-text: #7A5226;
  --danger-bg: #F6DCDD; --danger-text: #8E3E48; --info-bg: #F6E4E1; --info-text: #6E3E45;
  --callout-bg: #F7E6E3; --callout-border: #E1C1C1; --focus-ring: #A86B72; --brand-stripe: none;

  /* Dashboard illustration (pwa-dashboard-illustration) */
  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-2-bg) 100%);
  --hero-border: var(--callout-border);
  --hero-eyebrow-bg: var(--chip-2-bg); --hero-eyebrow-text: var(--chip-2-text);
  --art-glow: var(--chip-1-bg); --art-board: var(--chart-6); --art-board-edge: #BFA585;
  --art-bowl: var(--chart-2); --art-bowl-rim: var(--chart-4); --art-food1: var(--chart-3);
  --art-food2: var(--chip-4-bg); --art-food3: var(--chart-5); --art-leaf: var(--chart-4); --art-leaf2: var(--chart-2);
  --art-pot: var(--chart-3); --art-card: #FFFFFF; --art-ink: #73666A; --art-steam: #B9AAAD;
  --art-shadow: #3A2E30; --art-spark: var(--accent-1-deep);
}

/* ---------- Rainbow Pastel ---------- */
[data-theme="rainbow"] {
  color-scheme: light;
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #FBFAF8;
  --nav-bg: #EFEDF5; --nav-text: #36305E; --nav-icon: #6B62A8; --nav-hover-bg: #E6E3F0; --nav-active-bg: #FFFFFF; --nav-active-text: #2B2552;
  --text: #2F2D3A; --text-muted: #696676; --heading: #2F2D3A; --link: #3F6A9C;
  --border: #ECEAF0; --border-accent: #D8D4F2; --divider: #F1EFF3;
  --btn-primary-bg: #C9DDF2; --btn-primary-text: #1F3A5C; --btn-primary-hover: #B5CFEC;
  --btn-secondary-bg: #F6D1C1; --btn-secondary-text: #6E3520; --btn-secondary-hover: #F1C2AE;
  --btn-ghost-text: #4F4793; --btn-ghost-border: #D8D4F2;
  --accent-1: #D8D4F2; --accent-1-deep: #6B62A8; --accent-2: #C9DDF2; --accent-2-deep: #3F6A9C;
  --chip-1-bg: #FBE5DB; --chip-1-text: #7E3B22; --chip-2-bg: #F8E7CF; --chip-2-text: #77501C;
  --chip-3-bg: #F7F0CF; --chip-3-text: #655619; --chip-4-bg: #E0EEE5; --chip-4-text: #2F5C40;
  --chip-5-bg: #E0EBF8; --chip-5-text: #264E7C; --chip-6-bg: #E8E5F8; --chip-6-text: #463E86;
  --chart-1: #F2B9A3; --chart-2: #EDC690; --chart-3: #E6D488; --chart-4: #A8D0B6; --chart-5: #A6C6E8; --chart-6: #BCB5EA;
  --chart-edge: #8F87C4; --chart-track: #F1EFF3; --progress-track: #EFEDF6;
  --progress-fill: linear-gradient(90deg,#F6D1C1,#F3D8B5,#F1E4B3,#CFE3D6,#C9DDF2,#D8D4F2);
  --success-bg: #E0EEE5; --success-text: #2F5C40; --warning-bg: #F8E7CF; --warning-text: #77501C;
  --danger-bg: #FBE0D6; --danger-text: #8A3A22; --info-bg: #E0EBF8; --info-text: #264E7C;
  --callout-bg: #F1EFFA; --callout-border: #D8D4F2; --focus-ring: #6B62A8;
  --brand-stripe: linear-gradient(90deg,#F6D1C1,#F3D8B5,#F1E4B3,#CFE3D6,#C9DDF2,#D8D4F2);

  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-5-bg) 100%);
  --hero-border: var(--callout-border);
  --hero-eyebrow-bg: var(--chip-6-bg); --hero-eyebrow-text: var(--chip-6-text);
  --art-glow: var(--chip-3-bg); --art-board: var(--chart-2); --art-board-edge: #D9AE72;
  --art-bowl: var(--chart-5); --art-bowl-rim: #86AEDB; --art-food1: var(--chart-1);
  --art-food2: var(--chart-3); --art-food3: var(--chart-6); --art-leaf: #7FBB95; --art-leaf2: var(--chart-4);
  --art-pot: var(--chart-1); --art-card: #FFFFFF; --art-ink: #696676; --art-steam: #B3AFC0;
  --art-shadow: #2F2D3A; --art-spark: var(--accent-1-deep);
}

/* ---------- Neutral ---------- */
[data-theme="neutral"] {
  color-scheme: light;
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #FAF8F4;
  --nav-bg: #C5D9D8; --nav-text: #243B3A; --nav-icon: #4E6C6B; --nav-hover-bg: #B6CECD; --nav-active-bg: #FAF8F4; --nav-active-text: #1F3332;
  --text: #2D3133; --text-muted: #676D70; --heading: #2D3133; --link: #555F80;
  --border: #ECE9E5; --border-accent: #C5D9D8; --divider: #F1EFEB;
  --btn-primary-bg: #666F8F; --btn-primary-text: #FFFFFF; --btn-primary-hover: #596282;
  --btn-secondary-bg: #C5D9D8; --btn-secondary-text: #243B3A; --btn-secondary-hover: #B6CECD;
  --btn-ghost-text: #555F80; --btn-ghost-border: #AEB6D2;
  --accent-1: #A2B6B5; --accent-1-deep: #4E6C6B; --accent-2: #AEB6D2; --accent-2-deep: #555F80;
  --chip-1-bg: #E3EDEC; --chip-1-text: #2F4D4C; --chip-2-bg: #E6E9F3; --chip-2-text: #3E4768;
  --chip-3-bg: #EFECE7; --chip-3-text: #5A544B; --chip-4-bg: #DCE3E2; --chip-4-text: #34494A;
  --chip-5-bg: #E3EDEC; --chip-5-text: #2F4D4C; --chip-6-bg: #E6E9F3; --chip-6-text: #3E4768;
  --chart-1: #A2B6B5; --chart-2: #7D86A4; --chart-3: #C5D9D8; --chart-4: #AEB6D2; --chart-5: #D3CABE; --chart-6: #5F7A79;
  --chart-edge: #6E8786; --chart-track: #F1EFEB; --progress-track: #ECE9E5; --progress-fill: #A2B6B5;
  --success-bg: #E3EDEC; --success-text: #2F4D4C; --warning-bg: #F1E8DA; --warning-text: #6B5126;
  --danger-bg: #F2E1DF; --danger-text: #83423E; --info-bg: #E6E9F3; --info-text: #3E4768;
  --callout-bg: #EEF4F3; --callout-border: #C5D9D8; --focus-ring: #7D86A4; --brand-stripe: none;

  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-2-bg) 100%);
  --hero-border: var(--callout-border);
  --hero-eyebrow-bg: var(--chip-1-bg); --hero-eyebrow-text: var(--chip-1-text);
  --art-glow: var(--chip-3-bg); --art-board: var(--chart-5); --art-board-edge: #B9AD9D;
  --art-bowl: var(--chart-4); --art-bowl-rim: var(--chart-2); --art-food1: var(--chart-1);
  --art-food2: #E9DFC9; --art-food3: var(--chart-3); --art-leaf: var(--chart-6); --art-leaf2: var(--chart-1);
  --art-pot: var(--chart-2); --art-card: #FFFFFF; --art-ink: #676D70; --art-steam: #B7BBBD;
  --art-shadow: #2D3133; --art-spark: var(--accent-1-deep);
}

/* ---------- Dark ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1D1E23; --surface: #25272E; --surface-alt: #2B2D35;
  --nav-bg: #2C2F39; --nav-text: #E3E1EA; --nav-icon: #A9B0D6; --nav-hover-bg: #353947; --nav-active-bg: #3B4052; --nav-active-text: #F3F1F6;
  --text: #E8E6E3; --text-muted: #A9A7B0; --heading: #F1EFEC; --link: #A9C4E6;
  --border: #363944; --border-accent: #4A4F64; --divider: #30333C;
  --btn-primary-bg: #A9B0D6; --btn-primary-text: #1D1E2B; --btn-primary-hover: #BBC1E0;
  --btn-secondary-bg: #3A3E4D; --btn-secondary-text: #E8E6EF; --btn-secondary-hover: #454A5C;
  --btn-ghost-text: #C2C8E6; --btn-ghost-border: #555B75;
  --accent-1: #A9B0D6; --accent-1-deep: #C2C8E6; --accent-2: #9DB8A0; --accent-2-deep: #B6CDB8;
  --chip-1-bg: #3A3550; --chip-1-text: #D6D1F2; --chip-2-bg: #2F4136; --chip-2-text: #C8E0CC;
  --chip-3-bg: #4A3437; --chip-3-text: #F0CFCF; --chip-4-bg: #2E3C4E; --chip-4-text: #C9DCF2;
  --chip-5-bg: #3A3550; --chip-5-text: #D6D1F2; --chip-6-bg: #2F4136; --chip-6-text: #C8E0CC;
  --chart-1: #A9B0D6; --chart-2: #9DB8A0; --chart-3: #E3B5B5; --chart-4: #9CC3E6; --chart-5: #E6D29A; --chart-6: #E8B49E;
  --chart-edge: #1D1E23; --chart-track: #30333C; --progress-track: #30333C; --progress-fill: #9DB8A0;
  --success-bg: #2F4136; --success-text: #C8E0CC; --warning-bg: #463D2B; --warning-text: #EBD9A9;
  --danger-bg: #4A3437; --danger-text: #F0C4C4; --info-bg: #2E3C4E; --info-text: #C9DCF2;
  --callout-bg: #2B2D3A; --callout-border: #4A4F64; --focus-ring: #C2C8E6; --brand-stripe: none;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.5);

  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-1-bg) 100%);
  --hero-border: var(--callout-border);
  --hero-eyebrow-bg: var(--chip-2-bg); --hero-eyebrow-text: var(--chip-2-text);
  /* "Paper" objects stay light in Dark, so their ink must be dark. */
  --art-glow: #34364A; --art-board: var(--chart-6); --art-board-edge: #C38D77;
  --art-bowl: var(--chart-2); --art-bowl-rim: #7C9A80; --art-food1: var(--chart-3);
  --art-food2: var(--chart-5); --art-food3: var(--chart-1); --art-leaf: #86A98A; --art-leaf2: var(--chart-2);
  --art-pot: var(--chart-6); --art-card: #EDEAF2; --art-ink: #25272E; --art-steam: #A9A7B0;
  --art-shadow: #000000; --art-spark: var(--accent-1-deep);
}