/* Kaizo site palette: the ONLY file with colors (values from the app's brand_palette.dart).
   Theme: <html data-theme="light|dark"> when the visitor picked one (assets/theme.js), otherwise the device setting.
   Dark is the default when the device gives no preference. Loaded first on every page. */

:root {
  /* brand, same in both themes */
  --orange: #FF5E18;
  --orange-hover: #FF7A3D;
  --btn-glow: 0 10px 30px -10px rgba(255, 94, 24, .7);
  --on-orange: #1A0A00;
  --amber: #FFB020;
  --grad: linear-gradient(120deg, #FF5E18 0%, #FFB020 100%);
  --grad-v: linear-gradient(180deg, #FF5E18 0%, #FFB020 100%);
  --grad-text: linear-gradient(100deg, #FF5E18 0%, #FFB020 100%);
  --on-cyan: #00161A;
  /* always-dark surfaces: photos, phone frames, legal page band */
  --photo-ink: #0B0F17;
  --on-photo: #FFFFFF;
  --on-photo-line: rgba(255, 255, 255, .3);
  --on-photo-hover: rgba(255, 255, 255, .1);
  --photo-shade: linear-gradient(90deg, rgba(11, 15, 23, .92) 0%, rgba(11, 15, 23, .55) 50%, rgba(11, 15, 23, .15) 100%), linear-gradient(to top, rgba(11, 15, 23, .85), transparent 55%);
  --hero-photo-shade: linear-gradient(200deg, rgba(255, 94, 24, .14) 0%, transparent 45%), linear-gradient(to top, rgba(11, 15, 23, .75) 0%, transparent 45%), rgba(11, 15, 23, .28);
  --phone-frame: linear-gradient(160deg, #2A3547, #111824 40%, #0B0F17);
  --phone-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 70px -28px rgba(0, 0, 0, .9), 0 18px 40px -20px rgba(0, 0, 0, .6);
  /* the "any dish" section and the light half of the pages, light in both themes */
  --light: #F4F6FA;
  --light-text: #0B0F17;
  --light-muted: #475569;
  --orange-readable: #C2410C;
  --cyan-readable: #0E7490;
  /* Google button (Google brand rules) */
  --google-bg: #FFFFFF;
  --google-hover: #F1F3F4;
  --google-text: #1F1F1F;
}

/* ------------------------------------------------------------ dark */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --night: #0B0F17;
  --ink: #0F1520;
  --ink-2: #161F2E;
  --ink-3: #1C2738;
  --text: #FFFFFF;
  --muted: #94A3B8;
  --line: #243044;
  --cyan: #00E5FF;
  --accent-text: #FF7A3A;
  --link: #FF8A52;
  --header-bg: rgba(11, 15, 23, .86);
  --hover: rgba(255, 255, 255, .07);
  --ghost-line: rgba(255, 255, 255, .35);
  --chip-bg: rgba(255, 255, 255, .04);
  --card-shadow: none;
  --tick-bg: rgba(255, 94, 24, .16);
  --cyan-soft: rgba(0, 229, 255, .12);
  --amber-soft: rgba(255, 176, 32, .18);
  --orange-soft: rgba(255, 94, 24, .08);
  --plan-glow: 0 30px 80px -40px rgba(255, 94, 24, .55);
  --hero-glow: radial-gradient(ellipse 60% 50% at 85% 10%, rgba(255, 94, 24, .16), transparent 70%), radial-gradient(ellipse 50% 40% at 0% 100%, rgba(255, 176, 32, .07), transparent 70%);
  --final-shade: radial-gradient(ellipse 45% 55% at 50% 50%, rgba(11, 15, 23, .78), rgba(11, 15, 23, .25) 70%);
  --final-text-shadow: 0 4px 30px rgba(11, 15, 23, .6);
  --badge-shadow: 0 16px 40px -14px rgba(0, 0, 0, .8);
  --error: #F87171;
  --error-bg: rgba(248, 113, 113, .12);
  --error-text: #FECACA;
  --warn-bg: rgba(255, 176, 32, .1);
  --warn-text: #FDE7B0;
  --ok-bg: rgba(0, 229, 255, .08);
  --ok-text: #CFFAFE;
  --placeholder: #64748B;
  --logo-on-dark: block;
  --logo-on-light: none;
  /* SEO pages: tools, exercises, foods, guides */
  --surface: #161F2E;
  --surface-2: #1C2738;
  --field: #0F1520;
  --text-2: #CBD5E1;
  --protein: #FF5E18;
  --carbs: #FFB020;
  --fat: #00E5FF;
  --good: #4ADE80;
  --bad: #F87171;
  --answer-bg: linear-gradient(135deg, rgba(255, 94, 24, .12), rgba(255, 176, 32, .05));
  --answer-line: rgba(255, 94, 24, .45);
  --cta-bg: radial-gradient(circle at 85% 50%, rgba(255, 176, 32, .25), transparent 50%), linear-gradient(120deg, #2A1206, #161F2E);
  --kai-bg: radial-gradient(circle at 50% 60%, rgba(255, 94, 24, .28), transparent 65%), #161F2E;
  --map-off: #2E3B52;
  --map-head: #1E2938;
}

/* ------------------------------------------------------------ light (chosen, or device setting) */
:root[data-theme="light"] {
  color-scheme: light;
  --night: #F4F6FA;
  --ink: #FFFFFF;
  --ink-2: #FFFFFF;
  --ink-3: #FFFFFF;
  --text: #0B0F17;
  --muted: #475569;
  --line: #D6DCE5;
  --cyan: #0E7490;
  --accent-text: #C2410C;
  --link: #C2410C;
  --header-bg: rgba(255, 255, 255, .9);
  --hover: rgba(11, 15, 23, .05);
  --ghost-line: rgba(11, 15, 23, .25);
  --chip-bg: #FFFFFF;
  --card-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
  --tick-bg: rgba(255, 94, 24, .12);
  --cyan-soft: rgba(14, 116, 144, .1);
  --amber-soft: rgba(180, 83, 9, .12);
  --orange-soft: rgba(255, 94, 24, .08);
  --plan-glow: 0 30px 80px -40px rgba(255, 94, 24, .45);
  --hero-glow: radial-gradient(ellipse 60% 50% at 85% 10%, rgba(255, 94, 24, .12), transparent 70%), radial-gradient(ellipse 50% 40% at 0% 100%, rgba(255, 176, 32, .12), transparent 70%);
  --final-shade: radial-gradient(ellipse 45% 55% at 50% 50%, rgba(244, 246, 250, .9), rgba(244, 246, 250, .4) 70%);
  --final-text-shadow: none;
  --badge-shadow: 0 16px 40px -18px rgba(255, 94, 24, .6);
  --error: #B3261E;
  --error-bg: rgba(179, 38, 30, .08);
  --error-text: #7F1D1D;
  --warn-bg: rgba(255, 176, 32, .14);
  --warn-text: #78350F;
  --ok-bg: rgba(14, 116, 144, .08);
  --ok-text: #164E63;
  --placeholder: #64748B;
  --logo-on-dark: none;
  --logo-on-light: block;
  /* SEO pages: tools, exercises, foods, guides */
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --field: #F4F6FA;
  --text-2: #334155;
  --protein: #E8500F;
  --carbs: #F59E0B;
  --fat: #0E7490;
  --good: #15803D;
  --bad: #B3261E;
  --answer-bg: linear-gradient(135deg, #FFF1E8, #FFF8EC);
  --answer-line: #FFC7A8;
  --cta-bg: radial-gradient(circle at 85% 50%, rgba(255, 176, 32, .35), transparent 50%), linear-gradient(120deg, #FFE7D6, #FFF6EA);
  --kai-bg: radial-gradient(circle at 50% 60%, rgba(255, 94, 24, .18), transparent 65%), #FFFFFF;
  --map-off: #C9D1DD;
  --map-head: #E2E7EF;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --night: #F4F6FA;
    --ink: #FFFFFF;
    --ink-2: #FFFFFF;
    --ink-3: #FFFFFF;
    --text: #0B0F17;
    --muted: #475569;
    --line: #D6DCE5;
    --cyan: #0E7490;
    --accent-text: #C2410C;
    --link: #C2410C;
    --header-bg: rgba(255, 255, 255, .9);
    --hover: rgba(11, 15, 23, .05);
    --ghost-line: rgba(11, 15, 23, .25);
    --chip-bg: #FFFFFF;
    --card-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
    --tick-bg: rgba(255, 94, 24, .12);
    --cyan-soft: rgba(14, 116, 144, .1);
    --amber-soft: rgba(180, 83, 9, .12);
    --orange-soft: rgba(255, 94, 24, .08);
    --plan-glow: 0 30px 80px -40px rgba(255, 94, 24, .45);
    --hero-glow: radial-gradient(ellipse 60% 50% at 85% 10%, rgba(255, 94, 24, .12), transparent 70%), radial-gradient(ellipse 50% 40% at 0% 100%, rgba(255, 176, 32, .12), transparent 70%);
    --final-shade: radial-gradient(ellipse 45% 55% at 50% 50%, rgba(244, 246, 250, .9), rgba(244, 246, 250, .4) 70%);
    --final-text-shadow: none;
    --badge-shadow: 0 16px 40px -18px rgba(255, 94, 24, .6);
    --error: #B3261E;
    --error-bg: rgba(179, 38, 30, .08);
    --error-text: #7F1D1D;
    --warn-bg: rgba(255, 176, 32, .14);
    --warn-text: #78350F;
    --ok-bg: rgba(14, 116, 144, .08);
    --ok-text: #164E63;
    --placeholder: #64748B;
    --logo-on-dark: none;
    --logo-on-light: block;
    /* SEO pages: tools, exercises, foods, guides */
    --surface: #FFFFFF;
    --surface-2: #FFFFFF;
    --field: #F4F6FA;
    --text-2: #334155;
    --protein: #E8500F;
    --carbs: #F59E0B;
    --fat: #0E7490;
    --good: #15803D;
    --bad: #B3261E;
    --answer-bg: linear-gradient(135deg, #FFF1E8, #FFF8EC);
    --answer-line: #FFC7A8;
    --cta-bg: radial-gradient(circle at 85% 50%, rgba(255, 176, 32, .35), transparent 50%), linear-gradient(120deg, #FFE7D6, #FFF6EA);
    --kai-bg: radial-gradient(circle at 50% 60%, rgba(255, 94, 24, .18), transparent 65%), #FFFFFF;
    --map-off: #C9D1DD;
    --map-head: #E2E7EF;
  }
}

/* ------------------------------------------------------------ theme switch (shared by every page) */
:root .logo-on-dark { display: var(--logo-on-dark); }
:root .logo-on-light { display: var(--logo-on-light); }
.theme-btn { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.theme-btn:hover { background: var(--hover); }
.theme-btn svg { width: 19px; height: 19px; }
.theme-btn .t-sun, .theme-btn .t-moon, .theme-btn .t-auto { display: none; }
:root[data-theme="light"] .theme-btn .t-sun, :root[data-theme="dark"] .theme-btn .t-moon, :root:not([data-theme]) .theme-btn .t-auto { display: block; }

/* muscle map (exercise pages): primary / secondary muscles */
:root { --map-primary: #FF5E18; --map-secondary: #FFB020; }

/* Kaizo score (food pages): same colours as the app (brand_palette.dart), the band is also written in words */
:root {
  --score-vg: #0E7490; --on-score-vg: #FFFFFF;
  --score-g: #22D3EE; --on-score-g: #0B0F17;
  --score-f: #FBBF24; --on-score-f: #0B0F17;
  --score-l: #C2410C; --on-score-l: #FFFFFF;
}