/* Volo design tokens — ported from @volo-one/ali Root.
   Defined on :root so they inherit through shadow DOM into web components. */
:root {
  /* Fonts */
  --font-family-sans: "Roboto", helvetica, sans-serif;
  --font-family-serif: "Playfair Display", Times, serif;
  --font-family: var(--font-family-sans);

  /* Colors */
  --color-red-40: #f9aea1;
  --color-red-50: #e3371e;
  --color-red-60: #ad2007;
  --color-red: var(--color-red-50);

  --color-green-40: #b3ffe9;
  --color-green-50: #00d498;
  --color-green-60: #008b63;
  --color-green: var(--color-green-50);

  --color-teal-40: #a4eaf6;
  --color-teal-50: #0593a2;
  --color-teal-60: #0e4953;
  --color-teal: var(--color-teal-50);

  --color-magenta-40: #ffe1ed;
  --color-magenta-50: #f86da7;
  --color-magenta-60: #ad3869;
  --color-magenta: var(--color-magenta-50);

  --color-blue-40: #c7f1ff;
  --color-blue-50: #6bd5f7;
  --color-blue-60: #2b8eb0;
  --color-blue: var(--color-blue-50);

  --color-ocean-40: #1b3674;
  --color-ocean-50: #103778;
  --color-ocean-60: #151f30;
  --color-ocean: var(--color-ocean-50);

  --color-violet-40: #c6c8ff;
  --color-violet-50: #969afe;
  --color-violet-60: #666bff;
  --color-violet: var(--color-violet-50);

  --color-orange-40: #ffd4c3;
  --color-orange-50: #ff7a48;
  --color-orange-60: #b43300;
  --color-orange: var(--color-orange-50);

  --color-brown-40: #d0c5b9;
  --color-brown-50: #af906f;
  --color-brown-60: #6c4419;
  --color-brown: var(--color-brown-50);

  --color-yellow-40: #fff9a2;
  --color-yellow-50: #e8de54;
  --color-yellow-60: #b0a400;
  --color-yellow: var(--color-yellow-50);

  --color-white-50: #fff;
  --color-white-t: HSLA(0, 100%, 100%, 0.6);
  --color-white: var(--color-white-50);

  --color-black-10: #333;
  --color-black-20: #555;
  --color-black-30: #777;
  --color-black-40: #999;
  --color-black-50: #bbb;
  --color-black-60: #ccc;
  --color-black-70: #ddd;
  --color-black-80: #eee;
  --color-black-90: #fafafa;
  --color-black: var(--color-black-10);
  --color-black-t: HSLA(0, 0%, 0%, 0.1);

  --color-main: var(--color-red);
  --color-text: var(--color-black);
  --color-text-inverse: var(--color-white);
  --color-link: var(--color-main);

  /* line-height */
  --lh-30: 0.9;
  --lh-40: 1;
  --lh-50: 1.1;
  --lh-60: 1.4;
  --lh-70: 1.6;
  --lh: var(--lh-50);

  /* letter-spacing */
  --ls-50: 0.15rem;
  --ls: var(--ls-50);

  /* font sizes */
  --font-size-20: 0.6rem;
  --font-size-30: 0.8rem;
  --font-size-40: 1rem;
  --font-size-50: 1.125rem;
  --font-size-60: 1.6rem;
  --font-size-70: 2.4rem;
  --font-size-80: 3rem;
  --font-size-90: 5rem;
  --font-size-100: 6rem;
  --font-size: var(--font-size-50);

  /* spacing */
  --spacing-10: 0.1rem;
  --spacing-20: 0.2rem;
  --spacing-30: 0.4rem;
  --spacing-40: 0.6rem;
  --spacing-50: 1rem;
  --spacing-60: 1.5rem;
  --spacing-70: 2rem;
  --spacing-80: 2.5rem;
  --spacing-90: 3rem;
  --spacing-100: 4rem;
  --spacing-110: 6rem;
  --spacing-120: 9rem;
  --spacing-130: 12rem;
  --spacing: var(--spacing-50);

  /* border radius */
  --br-40: 0.2em;
  --br-50: 0.4em;
  --br: var(--br-50);

  /* border */
  --border-100: 1px solid var(--color-black-50);

  /* breakpoints */
  --bp-10: 36rem;
  --bp-20: 62rem;
  --bp: var(--bp-10);
}

:root {
  /* Volo Outdoor Co brand (from ~/proj/volo-outdoor-co/css/style.css) */
  --vo-bg: #ffffff;
  --vo-blue: #3a9fc8;
  --vo-blue-dark: #2278a0;
  --vo-blue-light: #e6f4fb;
  --vo-green: #5a8200;
  --vo-green-light: #edf7c8;
  /* Bright "filled meal tile" green (plan builder + week) — distinct from the
     olive brand --vo-green; named so the two plan components share one token
     instead of stray --color-green-50/60 references (#93). */
  --vo-green-bright: #00d498;
  --vo-green-bright-dark: #008b63;
  /* Amber "substituted / had something else" pair (self-plan meal logs, #5).
     --vo-amber is dark enough to clear the 3:1 non-text border contrast on both
     the light fill and the page; components referenced these names before they
     existed and were silently shipping on fallbacks. */
  --vo-amber-light: #fdecc8;
  --vo-amber: #8a5a00;
  /* Red was used as var(--vo-red, …) in several components but never defined —
     everything fell back to the literal. Define the trio so the name resolves
     (base alert red, plus a dark text / light background pair for status
     chips like recipe-bank's "rejected"). Values match the prior literals (#93). */
  --vo-red: #e3371e;
  --vo-red-dark: #8a1f1f;
  --vo-red-light: #fdecec;
  --vo-border: #dde6ee;
  --vo-surface: #f4f7fa;
  --vo-surface-alt: #eaf1f7;
  --vo-text: #1a2733;
  --vo-text-muted: #627385;
  --vo-radius: 6px;

  --vo-font: "Open Sans", system-ui, sans-serif;
  --vo-font-heading: "Young Serif", serif;
  --vo-font-display: "MuseoModerno", system-ui, sans-serif;

  /* Chart series palette. Anchored on the brand (brand green for vegetables,
     brand blues for weight/water) and extended with harmonized earth tones,
     since the brand site doesn't ship a six-food-group palette. Tweak freely. */
  --chart-vegetables: #4caf50;
  --chart-fruit: #ff9f40;
  --chart-grain: #ffd454;
  --chart-meat: #ef553b;
  --chart-fats: #9d6bff;
  --chart-sugar: #f368c0;
  --chart-weight: #3b7dd8;
  --chart-workout: #ff6b8a;
  --chart-water: #26c6da;
}

html,
body {
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-family: var(--font-family);
  font-weight: 300;
  line-height: var(--lh);
  /* The mobile nav drawer (volo-shell) is position: fixed at left:0 and
     translated -100% off-screen. Without this clip, iOS Safari lets the
     page scroll horizontally to reveal the hidden drawer. */
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}