/* ============================================
   NourishPlan Design Tokens & Theme System
   ============================================ */

:root {
  /* === THEME: Citrus (Default) === */
  --bg-primary: #FFFBF5;
  --bg-secondary: #FFF3E0;
  --bg-tertiary: #FFF8E1;
  --bg-glass: rgba(255, 251, 245, 0.85);

  --accent-primary: #FF6B35;
  --accent-primary-hover: #E85A28;
  --accent-primary-light: rgba(255, 107, 53, 0.12);
  --accent-secondary: #FFB347;
  --accent-secondary-hover: #FFA726;
  --accent-tertiary: #4CAF50;
  --accent-tertiary-hover: #43A047;

  /* Macro colors */
  --color-calories: #FF6B35;
  --color-protein: #E53935;
  --color-carbs: #FFB300;
  --color-fat: #7B1FA2;

  /* Goal colors */
  --color-bulk: #4CAF50;
  --color-cut: #E53935;
  --color-maintain: #1976D2;

  /* Text */
  --text-primary: #1A1A2E;
  --text-secondary: #4A4A68;
  --text-tertiary: #8888A0;
  --text-inverse: #FFFFFF;
  --text-accent: var(--accent-primary);

  /* Surfaces */
  --surface-card: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-input: #FFFFFF;
  --surface-overlay: rgba(26, 26, 46, 0.5);

  /* Borders */
  --border-light: rgba(0, 0, 0, 0.06);
  --border-medium: rgba(0, 0, 0, 0.12);
  --border-focus: var(--accent-primary);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

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

  /* Typography */
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3rem;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Layout */
  --sidebar-width: 240px;
  --bottom-nav-height: 72px;
  --header-height: 64px;

  /* Transitions */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
}

/* === THEME: Berry === */
[data-theme="berry"] {
  --bg-primary: #F8F5FF;
  --bg-secondary: #EDE7F6;
  --bg-tertiary: #F3E5F5;
  --bg-glass: rgba(248, 245, 255, 0.85);
  --accent-primary: #7C3AED;
  --accent-primary-hover: #6D28D9;
  --accent-primary-light: rgba(124, 58, 237, 0.12);
  --accent-secondary: #A78BFA;
  --accent-secondary-hover: #8B5CF6;
  --accent-tertiary: #EC4899;
  --accent-tertiary-hover: #DB2777;
}

/* === THEME: Matcha === */
[data-theme="matcha"] {
  --bg-primary: #F5F9F3;
  --bg-secondary: #E8F5E9;
  --bg-tertiary: #F1F8E9;
  --bg-glass: rgba(245, 249, 243, 0.85);
  --accent-primary: #2E7D32;
  --accent-primary-hover: #1B5E20;
  --accent-primary-light: rgba(46, 125, 50, 0.12);
  --accent-secondary: #66BB6A;
  --accent-secondary-hover: #4CAF50;
  --accent-tertiary: #FF8F00;
  --accent-tertiary-hover: #FF6F00;
}

/* === THEME: Ocean === */
[data-theme="ocean"] {
  --bg-primary: #F0F7FF;
  --bg-secondary: #E3F2FD;
  --bg-tertiary: #E1F5FE;
  --bg-glass: rgba(240, 247, 255, 0.85);
  --accent-primary: #1976D2;
  --accent-primary-hover: #1565C0;
  --accent-primary-light: rgba(25, 118, 210, 0.12);
  --accent-secondary: #42A5F5;
  --accent-secondary-hover: #2196F3;
  --accent-tertiary: #00BCD4;
  --accent-tertiary-hover: #00ACC1;
}

/* === THEME: Midnight === */
[data-theme="midnight"] {
  --bg-primary: #1A1A2E;
  --bg-secondary: #16213E;
  --bg-tertiary: #0F3460;
  --bg-glass: rgba(26, 26, 46, 0.9);
  --accent-primary: #FF6B6B;
  --accent-primary-hover: #EE5A5A;
  --accent-primary-light: rgba(255, 107, 107, 0.15);
  --accent-secondary: #FFC947;
  --accent-secondary-hover: #FFB800;
  --accent-tertiary: #4ECDC4;
  --accent-tertiary-hover: #3DBDB4;
  --text-primary: #F0F0F0;
  --text-secondary: #B0B0C8;
  --text-tertiary: #6868A0;
  --text-inverse: #1A1A2E;
  --surface-card: #222244;
  --surface-elevated: #2A2A4A;
  --surface-input: #2A2A4A;
  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.15);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
}