/* ============================================================
   ListoChef — Official Design Tokens
   ============================================================
   Primary Brand  → #0F5132  (headers, nav, primary buttons)
   Secondary      → #F57C00  (highlights, secondary buttons, links)
   Text           → #1C1C1C  (body text)
   Background     → #FFFFFF  (page background)
   Card           → #F5F5F5  (cards, panels, containers)
   Success        → #D4EDDA  (positive states, success messages)
   Accent         → #FFD700  (badges, indicators, highlights)
   ============================================================ */

:root {
  /* Core palette */
  --color-primary: #0F5132;
  --color-primary-light: #1a7a4c;
  --color-primary-dark: #0a3622;
  --color-primary-10: rgba(15, 81, 50, 0.10);
  --color-primary-15: rgba(15, 81, 50, 0.15);
  --color-primary-20: rgba(15, 81, 50, 0.20);

  --color-secondary: #F57C00;
  --color-secondary-light: #ff9800;
  --color-secondary-dark: #e65100;
  --color-secondary-10: rgba(245, 124, 0, 0.10);
  --color-secondary-15: rgba(245, 124, 0, 0.15);

  --color-text: #1C1C1C;
  --color-text-secondary: #555555;
  --color-text-muted: #888888;
  --color-text-on-primary: #FFFFFF;
  --color-text-on-secondary: #FFFFFF;

  --color-background: #FFFFFF;
  --color-card: #F5F5F5;
  --color-card-elevated: #FFFFFF;

  --color-success: #D4EDDA;
  --color-success-text: #0F5132;
  --color-success-border: #a3d9b1;

  --color-accent: #FFD700;
  --color-accent-text: #1C1C1C;

  --color-error: #DC2626;
  --color-error-bg: #FEE2E2;
  --color-warning: #F59E0B;
  --color-warning-bg: #FEF3C7;
  --color-info: #2563EB;
  --color-info-bg: #DBEAFE;

  /* Borders & dividers */
  --color-border: #E0E0E0;
  --color-divider: #EEEEEE;

  /* Shadows */
  --shadow-soft: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-medium: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-card: 0 2px 8px rgba(15,81,50,0.06);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Header height */
  --header-h: 72px;
}

@media (min-width: 768px) {
  :root {
    --header-h: 80px;
  }
}

/* Dark mode overrides */
.dark {
  --color-background: #0B1220;
  --color-card: #162032;
  --color-card-elevated: #1a2840;
  --color-text: #E5E7EB;
  --color-text-secondary: #9CA3AF;
  --color-text-muted: #6B7280;
  --color-border: #2d3a4d;
  --color-divider: #1e2a3d;
  --color-primary-10: rgba(15, 81, 50, 0.20);
  --color-secondary-10: rgba(245, 124, 0, 0.20);
}