/*
 * theme.css — Single Source of Truth for All Colors
 * NutriCare — Healthcare Green Palette
 * Version: 1.0
 *
 * HOW TO SWITCH THEMES:
 * 1. Copy this file to e.g. theme-dark.css
 * 2. Change the color values
 * 3. Swap the <link> in includes/header.php
 * No Tailwind rebuild needed — all Tailwind classes reference these variables.
 */

:root {
  /* ═══════════════════════════════════════════════
     PRIMARY PALETTE — Teal/Green (Health & Nutrition)
     ═══════════════════════════════════════════════ */
  --color-primary-50: #ECFDF5;
  --color-primary-100: #D1FAE5;
  --color-primary-200: #A7F3D0;
  --color-primary-300: #6EE7B7;
  --color-primary-400: #34D399;
  --color-primary: #2D9F83;
  --color-primary-500: #259E73;
  --color-primary-600: #1E8A6A;
  --color-primary-700: #187558;
  --color-primary-800: #136048;
  --color-primary-900: #0D4B38;

  /* ═══════════════════════════════════════════════
     DARK PALETTE — Deep Forest (Structure & Headers)
     ═══════════════════════════════════════════════ */
  --color-dark: #1A3A2F;
  --color-dark-50: #E8F0EC;
  --color-dark-100: #C5D8CE;
  --color-dark-200: #8FB0A0;
  --color-dark-300: #5A8972;
  --color-dark-400: #2D6248;
  --color-dark-500: #1A3A2F;
  --color-dark-600: #152F26;
  --color-dark-700: #11241E;
  --color-dark-800: #0D1A15;
  --color-dark-900: #080F0C;

  /* ═══════════════════════════════════════════════
     ACCENT PALETTE — Warm Gold (CTAs & Highlights)
     ═══════════════════════════════════════════════ */
  --color-accent-50: #FDF6E8;
  --color-accent-100: #FBE9C4;
  --color-accent-200: #F7D38A;
  --color-accent-300: #F2BC50;
  --color-accent: #E8A838;
  --color-accent-400: #E8A838;
  --color-accent-500: #D4952C;
  --color-accent-600: #B87D22;
  --color-accent-700: #9C6619;
  --color-accent-800: #7F5013;
  --color-accent-900: #633B0D;

  /* ═══════════════════════════════════════════════
     LIGHT PALETTE — Soft Mint (Secondary)
     ═══════════════════════════════════════════════ */
  --color-light: #A8E6CF;
  --color-light-50: #EAF9F1;
  --color-light-100: #D5F3E3;
  --color-light-200: #A8E6CF;
  --color-light-300: #7BD9B7;
  --color-light-400: #4ECC9F;
  --color-light-500: #3AB087;

  /* ═══════════════════════════════════════════════
     WARM PALETTE — Coral/Orange (Alerts & Urgency)
     ═══════════════════════════════════════════════ */
  --color-warm: #E07A5F;
  --color-warm-50: #FDF3EF;
  --color-warm-100: #FAE0D8;
  --color-warm-200: #F5C1B1;
  --color-warm-300: #EFA18A;
  --color-warm-400: #E07A5F;
  --color-warm-500: #CC6A4F;
  --color-warm-600: #B05A40;
  --color-warm-700: #944A32;
  --color-warm-800: #783A24;
  --color-warm-900: #5C2B18;

  /* ═══════════════════════════════════════════════
     SEMANTIC COLORS
     ═══════════════════════════════════════════════ */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-error: #ef4444;
  --color-error-light: #fee2e2;

  /* ═══════════════════════════════════════════════
     SURFACE & BACKGROUND
     ═══════════════════════════════════════════════ */
  --color-bg-body: #F8FAFC;
  --color-bg-surface: #FFFFFF;
  --color-bg-muted: #F1F5F9;
  --color-bg-subtle: #F8FAFC;

  /* ═══════════════════════════════════════════════
     BORDERS
     ═══════════════════════════════════════════════ */
  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;
  --color-border-strong: #CBD5E1;

  /* ═══════════════════════════════════════════════
     TEXT
     ═══════════════════════════════════════════════ */
  --color-text: #0F172A;
  --color-text-secondary: #64748B;
  --color-text-muted: #94A3B8;
  --color-text-inverse: #FFFFFF;

  /* ═══════════════════════════════════════════════
     GRADIENTS
     ═══════════════════════════════════════════════ */
  --gradient-primary: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-warm) 100%);
  --gradient-hero: linear-gradient(135deg, var(--color-dark-800) 0%, var(--color-dark) 40%, var(--color-primary-700) 70%, var(--color-primary) 100%);
  --gradient-cta: linear-gradient(135deg, var(--color-accent) 0%, var(--color-warm) 50%, var(--color-warm-500) 100%);

  /* ═══════════════════════════════════════════════
     SHADOWS
     ═══════════════════════════════════════════════ */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ═══════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════ */
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  /* ═══════════════════════════════════════════════
     BORDER RADIUS
     ═══════════════════════════════════════════════ */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* ═══════════════════════════════════════════════
     TRANSITIONS
     ═══════════════════════════════════════════════ */
  --transition-fast: 150ms;
  --transition-normal: 250ms;
  --transition-slow: 350ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

  /* ═══════════════════════════════════════════════
     Z-INDEX SCALE
     ═══════════════════════════════════════════════ */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 40;
  --z-header: 50;
  --z-mobile-menu: 60;
  --z-toast: 70;
  --z-modal: 1000;

  /* ═══════════════════════════════════════════════
     LEGACY VARIABLE ALIASES
     ═══════════════════════════════════════════════ */
  --primary: var(--color-primary);
  --primary-light: var(--color-light);
  --primary-dark: var(--color-dark);
  --primary-gradient: var(--gradient-primary);
  --accent: var(--color-accent);
  --accent-light: var(--color-accent-200);
  --accent-dark: var(--color-accent-500);
  --accent-gradient: var(--gradient-accent);
  --warm: var(--color-warm);
  --warm-light: var(--color-warm-100);
  --warm-dark: var(--color-warm-600);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --error: var(--color-error);
  --bg-body: var(--color-bg-body);
  --bg-surface: var(--color-bg-surface);
  --border-light: var(--color-border);
  --border-medium: var(--color-border-strong);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: var(--color-text-muted);
  --text-inverted: var(--color-text-inverse);
}