:root {
  /* Brand palette — Rabbithole */
  --sage: #87A878;
  --sage-50: #F2F6F0;
  --sage-100: #E0EBD9;
  --sage-200: #C5D9BD;
  --sage-300: #A0BF9C;
  --sage-400: #87A878;
  --sage-500: #6E9460;
  --sage-600: #577A4A;
  --carrot: #E8702A;
  --carrot-light: #F09556;
  --carrot-dark: #C55A1C;

  /* Canvas & Surface */
  --color-canvas: #FAFAF9;
  --color-surface: #FFFFFF;
  --color-surface-elevated: var(--sage-50);

  /* Score Tiers — 3-tier: green / light-red / dramatic red */
  --color-score-green: var(--sage-500);
  --color-score-green-bg: var(--sage-100);
  --color-score-red-light: #D97706;
  --color-score-red-light-bg: #FEF3C7;
  --color-score-red: #B71C1C;
  --color-score-red-bg: #F44336;

  /* Legacy 5-tier (keep for backend compatibility but UI uses 3-tier) */
  --color-excellent: var(--sage-500);
  --color-excellent-bg: var(--sage-100);
  --color-great: var(--sage-500);
  --color-great-bg: var(--sage-100);
  --color-good: var(--sage-500);
  --color-good-bg: var(--sage-100);
  --color-caution: #D97706;
  --color-caution-bg: #FEF3C7;
  --color-avoid: #B71C1C;
  --color-avoid-bg: #F44336;

  /* Accent & Text */
  --color-accent: var(--carrot);
  --color-text-primary: #2D2D2D;
  --color-text-secondary: #5C574F;
  --color-text-muted: #7A756D;
  --color-border: rgba(0, 0, 0, 0.04);

  /* Scanner */
  --color-scan-bg: #111111;
  --color-scan-accent: #4CAF50;

  /* Status */
  --color-success: #4CAF50;
  --color-warning: #D32F2F;
  --color-error: #B71C1C;
  --color-status-info-bg: #EFF6FF;
  --color-status-info: #1D4ED8;

  /* Typography */
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-family: 'Plus Jakarta Sans', sans-serif;

  /* Font sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 15px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;

  /* Type scale (shorthand) */
  --text-display: 700 2rem/1.2 var(--font-heading);
  --text-h2: 700 1.25rem/1.3 var(--font-heading);
  --text-h3: 600 1rem/1.4 var(--font-heading);
  --text-body: 400 0.9375rem/1.5 var(--font-body);
  --text-caption: 400 0.8125rem/1.4 var(--font-body);
  --text-badge: 700 0.875rem/1 var(--font-body);
  --text-tab: 500 0.6875rem/1 var(--font-body);

  /* Line heights */
  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;

  /* Spacing (8px base) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Layout */
  --screen-padding: 20px;
  --card-padding: 16px;
  --card-gap: 12px;
  --card-radius: 16px;
  --badge-radius: 12px;
  --tag-radius: 20px;
  --tab-bar-height: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Tier color utility classes (CSP blocks inline styles) */
.tier-color--safe { color: #4CAF50; }
.tier-color--caution { color: #D97706; }
.tier-color--avoid { color: #B71C1C; }

.tier-badge--safe { color: #4CAF50; background: #E8F5E9; }
.tier-badge--caution { color: #D97706; background: #FEF3C7; }
.tier-badge--avoid { color: #FFFFFF; background: #F44336; }

.tier-bg--safe { background: #E8F5E9; }
.tier-bg--caution { background: #FEF3C7; }
.tier-bg--avoid { background: #F44336; }

.tier-border--safe { border-color: #4CAF50; }
.tier-border--caution { border-color: #D97706; }
.tier-border--avoid { border-color: #B71C1C; }

/* Score ring stroke classes */
.ring-progress--safe { stroke: #4CAF50; }
.ring-progress--caution { stroke: #D97706; }
.ring-progress--avoid { stroke: #B71C1C; }

/* Safety tag classes */
.safety-tag--safe { color: #4CAF50; background: #E8F5E9; }
.safety-tag--caution { color: #D97706; background: #FEF3C7; }
.safety-tag--avoid { color: #B71C1C; background: #F44336; }
.safety-tag--clean { color: #2E7D32; background: #E8F5E9; }

/* Ingredient risk color classes */
.risk-color--low { color: #4CAF50; }
.risk-color--medium { color: #D97706; }
.risk-color--high { color: #B71C1C; }

.risk-bg--low { background: #E8F5E9; }
.risk-bg--medium { background: #FEF3C7; }
.risk-bg--high { background: #F44336; }

/* Simplicity meter color classes */
.simplicity-color--excellent { color: #4CAF50; }
.simplicity-color--good { color: #EAB308; }
.simplicity-color--fair { color: #D97706; }
.simplicity-color--poor { color: #B71C1C; }

.simplicity-fill--excellent { background: #4CAF50; }
.simplicity-fill--good { background: #EAB308; }
.simplicity-fill--fair { background: #D97706; }
.simplicity-fill--poor { background: #B71C1C; }

/* Dark mode: disabled for now — always use bright light palette */