/**
 * Macro tracker — light theme.
 * Overrides the base server's variables.css (public roots load base-first,
 * downstream wins). Warm-paper editorial palette; keeps every variable name
 * the base web-component templates read so their fallbacks never kick in.
 */

:root {
  /* Brand / accents */
  --color-primary: #2f7d5b;          /* nutrition green */
  --color-primary-dark: #1f5a40;
  --color-secondary: #8a8578;
  --color-success: #2f7d5b;
  --color-danger: #c0492f;           /* over-budget terracotta */
  --color-warning: #c98a1b;
  --color-info: #3a6ea5;

  /* Macro hues */
  --macro-protein: #c0492f;
  --macro-carbs:   #c98a1b;
  --macro-fat:     #3a6ea5;
  --macro-calories:#2f7d5b;

  /* Text */
  --color-text: #2b2822;
  --color-text-light: #6f6a5f;
  --color-text-white: #faf8f2;
  --ink: #2b2822;
  --ink-soft: #6f6a5f;
  --ink-faint: #a8a293;

  /* Surfaces */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f4f4f2;
  --color-bg-dark: #2b2822;
  --paper: #ffffff;
  --paper-raised: #ffffff;
  --paper-sunken: #f1f1ef;

  /* Borders */
  --color-border: #e4e3df;
  --color-border-focus: #2f7d5b;
  --hairline: #eae9e5;

  /* Scrollbar (light) */
  --color-scrollbar-track: #f1f1ef;
  --color-scrollbar-thumb: #d0cfca;
  --color-scrollbar-thumb-hover: #b7b6b0;
  --color-scrollbar-thumb-active: #9c9b95;

  /* Typography */
  --font-primary: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-numeric: "Iowan Old Style", Palatino, Georgia, serif;
  --font-accent: var(--font-display);
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.5rem;
  --line-height-base: 1.5;
  --font-weight-normal: 400;
  --font-weight-bold: 600;

  /* Spacing */
  --spacing-xs: 0.375rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-xxl: 3rem;

  /* Layout */
  --border-radius-sm: 0.375rem;
  --border-radius: 0.625rem;
  --border-radius-lg: 1rem;

  /* Shadows (soft, light) */
  --shadow-sm: 0 1px 2px rgba(43, 40, 34, 0.06);
  --shadow: 0 6px 20px rgba(43, 40, 34, 0.08);
  --shadow-lg: 0 18px 48px rgba(43, 40, 34, 0.12);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.28s cubic-bezier(.2,.7,.3,1);
  --transition-slow: 0.6s ease;

  /* Component defaults kept for base templates */
  --container-max-sm: 720px;
  --container-max-md: 860px;
  --container-max-lg: 920px;
  --container-padding: 1.25rem;

  --input-color: var(--ink);
  --input-bg: #fff;
  --input-shadow: none;
  --input-shadow-focus: 0 0 0 3px rgba(47, 125, 91, 0.18);

  --btn-shadow: var(--shadow-sm);
  --btn-shadow-focus: 0 0 0 3px rgba(47, 125, 91, 0.18);
  --btn-shadow-active: inset 0 2px 4px rgba(43, 40, 34, 0.15);

  --breakpoint-sm: 600px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}