/* ============================================
   Alchemy Eats — Design Tokens
   Dark-mode first, earthy/natural palette
   ============================================ */

:root {
  /* === Core Palette === */
  --bg-primary: #0f1a14;
  --bg-secondary: #152019;
  --bg-tertiary: #1a2a1e;
  --bg-glass: rgba(15, 26, 20, 0.85);

  --accent-primary: #4caf78;
  --accent-primary-hover: #5ec48a;
  --accent-primary-light: rgba(76, 175, 120, 0.12);
  --accent-primary-glow: rgba(76, 175, 120, 0.3);
  --accent-secondary: #e8a838;
  --accent-secondary-hover: #f0b848;
  --accent-tertiary: #4ecdc4;
  --accent-tertiary-hover: #3dbdb4;

  /* Macro colors */
  --color-calories: #e8a838;
  --color-protein: #ef6461;
  --color-carbs: #4ecdc4;
  --color-fat: #a78bfa;

  /* Goal colors */
  --color-bulk: #4caf78;
  --color-cut: #ef6461;
  --color-maintain: #4ecdc4;

  /* Text */
  --text-primary: #f5f0e8;
  --text-secondary: #b0c4b5;
  --text-tertiary: #6b8575;
  --text-inverse: #0f1a14;
  --text-accent: var(--accent-primary);

  /* Surfaces */
  --surface-card: #1a2a1e;
  --surface-elevated: #1f3225;
  --surface-input: #152019;
  --surface-overlay: rgba(10, 15, 12, 0.7);
  --surface-secondary: #1f3225;

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

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

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

  /* Typography */
  --font-heading: 'DM Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'DM Sans', 'Inter', 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;
  --tracking-tight: -0.02em;

  /* Layout */
  --sidebar-width: 240px;
  --sidebar-collapsed: 72px;
  --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 overrides — kept for settings but now default is dark */
[data-theme="citrus"] {
  --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-primary-glow: rgba(255, 107, 53, 0.3);
  --accent-secondary: #FFB347;
  --accent-secondary-hover: #FFA726;
  --accent-tertiary: #4CAF50;
  --accent-tertiary-hover: #43A047;
  --color-calories: #FF6B35;
  --color-protein: #E53935;
  --color-carbs: #FFB300;
  --color-fat: #7B1FA2;
  --text-primary: #1A1A2E;
  --text-secondary: #4A4A68;
  --text-tertiary: #8888A0;
  --text-inverse: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-input: #FFFFFF;
  --surface-secondary: #FFF8E1;
  --surface-overlay: rgba(26, 26, 46, 0.5);
  --border-light: rgba(0, 0, 0, 0.06);
  --border-medium: rgba(0, 0, 0, 0.12);
  --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);
}

[data-theme="berry"] {
  --bg-primary: #1a1028;
  --bg-secondary: #221538;
  --bg-tertiary: #2a1a42;
  --bg-glass: rgba(26, 16, 40, 0.9);
  --accent-primary: #7C3AED;
  --accent-primary-hover: #8B5CF6;
  --accent-primary-light: rgba(124, 58, 237, 0.15);
  --accent-primary-glow: rgba(124, 58, 237, 0.3);
  --accent-secondary: #A78BFA;
  --accent-secondary-hover: #8B5CF6;
  --accent-tertiary: #EC4899;
  --accent-tertiary-hover: #DB2777;
  --text-primary: #F0E8FF;
  --text-secondary: #B0A0C8;
  --text-tertiary: #6858A0;
  --surface-card: #221538;
  --surface-elevated: #2a1a42;
  --surface-input: #1a1028;
  --surface-secondary: #2a1a42;
  --border-light: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.12);
}

[data-theme="matcha"] {
  --bg-primary: #f0f5ed;
  --bg-secondary: #e0eada;
  --bg-tertiary: #d5e3ce;
  --bg-glass: rgba(240, 245, 237, 0.85);
  --accent-primary: #2E7D32;
  --accent-primary-hover: #1B5E20;
  --accent-primary-light: rgba(46, 125, 50, 0.12);
  --accent-primary-glow: rgba(46, 125, 50, 0.3);
  --accent-secondary: #66BB6A;
  --accent-secondary-hover: #4CAF50;
  --accent-tertiary: #FF8F00;
  --accent-tertiary-hover: #FF6F00;
  --text-primary: #1a2e1c;
  --text-secondary: #4a6a4e;
  --text-tertiary: #7a9a7e;
  --surface-card: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-input: #FFFFFF;
  --surface-secondary: #e0eada;
  --border-light: rgba(0, 0, 0, 0.06);
  --border-medium: rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="ocean"] {
  --bg-primary: #0a1628;
  --bg-secondary: #0f1e38;
  --bg-tertiary: #142848;
  --bg-glass: rgba(10, 22, 40, 0.9);
  --accent-primary: #1976D2;
  --accent-primary-hover: #2196F3;
  --accent-primary-light: rgba(25, 118, 210, 0.15);
  --accent-primary-glow: rgba(25, 118, 210, 0.3);
  --accent-secondary: #42A5F5;
  --accent-secondary-hover: #2196F3;
  --accent-tertiary: #00BCD4;
  --accent-tertiary-hover: #00ACC1;
  --text-primary: #E8F0FF;
  --text-secondary: #A0B8D8;
  --text-tertiary: #5878A0;
  --surface-card: #0f1e38;
  --surface-elevated: #142848;
  --surface-input: #0a1628;
  --surface-secondary: #142848;
  --border-light: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.12);
}

[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: #FF8888;
  --accent-primary-light: rgba(255, 107, 107, 0.15);
  --accent-primary-glow: rgba(255, 107, 107, 0.3);
  --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;
  --surface-secondary: #2A2A4A;
  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.15);
}