@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');
@import "tailwindcss";

/* ============================================================
   DESIGN TOKENS - Color System
   ============================================================
   Centralized color definitions for brand consistency.
   To change brand colors, modify only these variables.
   ============================================================ */

:root {
  /* Background & Foreground */
  --background: #F9F5F0;
  --foreground: #171717;
  
  /* Brand Colors */
  --color-brand: #00C46B;           /* Primary green (Lifesum) */
  --color-brand-dark: #00A85B;      /* Darker green for hover states */
  
  /* Semantic Colors */
  --color-success: #00C46B;         /* Success states, positive indicators */
  --color-warning: #FBBF24;         /* Warnings, carbs indicator */
  --color-danger: #EF4444;          /* Errors, delete actions */
  --color-info: #3B82F6;            /* Information, links */
  
  /* Chart/Data Colors */
  --color-protein: #00C46B;         /* Protein indicator (green) */
  --color-carbs: #FBBF24;           /* Carbs indicator (amber) */
  --color-fat: #F472B6;             /* Fat indicator (pink) */
  --color-remaining: #E5E7EB;       /* Remaining/empty state */
  
  /* UI Colors */
  --color-cream: #F9F5F0;           /* Cream background */
  --color-cream-dark: #EDE8E0;      /* Darker cream */
  --color-cream-light: #FFF7ED;     /* Lighter cream */
  --color-cream-pink: #FFF1F1;      /* Pink tinted cream */
  --color-cream-blue: #F8FAFF;      /* Blue tinted cream */
  
  /* Chart Stroke Colors */
  --color-chart-stroke: #E2E8F0;    /* Chart grid lines */
  --color-chart-axis: #64748B;      /* Chart axis text */
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Playfair Display', ui-serif, Georgia, serif;
  --font-mono: var(--font-geist-mono);

  /* Map tokens to Tailwind */
  --color-primary: var(--color-brand);
  --color-accent: var(--color-brand);
  --color-cream: var(--color-cream);
  --color-cream-dark: var(--color-cream-dark);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #F9F5F0;
    --foreground: #171717;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-serif {
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
}