/**
 * Aspire Wellness - CSS Design System Variables
 * Based on the brand guidelines from the development plan
 */

:root {
    /* ===== PRIMARY BRAND COLORS ===== */
    --primary-coral: #F8B5AC;
    --primary-coral-dark: #A65B50;          /* Brand dark coral - rgb(166, 91, 80) */
    --primary-coral-darker: #8B4A42;        /* Even darker for hover states */
    --primary-coral-light: #FAC9C3;
    --primary-coral-text: #A65B50;          /* Brand dark coral for text - WCAG AA compliant (5.2:1) */

    /* ===== SECONDARY COLORS ===== */
    --secondary-charcoal: #3E2424;          /* Brand dark brown - rgb(62, 36, 36) */
    --secondary-charcoal-dark: #2D1A1A;     /* Darker variant */
    --secondary-charcoal-light: #5A3A3A;    /* Lighter variant */

    /* Dark blue palette for hero sections */
    --secondary-navy: #1a1a2e;
    --secondary-navy-medium: #16213e;
    --secondary-navy-light: #0f3460;

    /* ===== NEUTRAL COLORS ===== */
    --neutral-white: #FFFFFF;
    --neutral-off-white: #F9F7F6;           /* Warm off-white */
    --neutral-gray-100: #F5F2F1;            /* Warm gray tint */
    --neutral-gray-200: #E8E2E0;            /* Warm light gray */
    --neutral-gray-300: #D4CBCA;            /* Warm medium-light gray */
    --neutral-gray-400: #A69A98;            /* Warm medium gray */
    --neutral-gray-500: #7A6E6C;            /* Warm gray */
    --neutral-gray-600: #5C4F4D;            /* Warm dark gray */
    --neutral-gray-700: #4A3C3A;            /* Body text - warm brown */
    --neutral-gray-800: #3E2424;            /* Headings - brand dark brown */
    --neutral-gray-900: #2D1A1A;            /* Darkest brown */

    /* ===== ACCENT COLORS ===== */
    --accent-success: #2e7d32;
    --accent-success-light: #e8f5e9;
    --accent-warning: #e65100;
    --accent-warning-light: #fff3e0;
    --accent-error: #d32f2f;
    --accent-error-light: #ffebee;
    --accent-whatsapp: #25D366;
    --accent-whatsapp-dark: #128C7E;

    /* ===== SUPPLEMENTARY COLORS ===== */
    --preset-teal: #00d084;
    --preset-cyan: #7bdcb5;
    --preset-blue: #0693e3;
    --preset-red: #cf2e2e;
    --preset-orange: #ff6900;

    /* ===== GRADIENTS ===== */
    --gradient-coral: linear-gradient(135deg, var(--primary-coral) 0%, var(--primary-coral-dark) 100%);
    --gradient-coral-dark: linear-gradient(135deg, var(--primary-coral-dark) 0%, var(--primary-coral-darker) 100%);
    --gradient-hero: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 100%);
    --gradient-card: linear-gradient(180deg, rgba(248,181,172,0.08) 0%, rgba(248,181,172,0.02) 100%);
    --gradient-warm: linear-gradient(135deg, var(--primary-coral) 0%, var(--primary-coral-light) 50%, var(--neutral-white) 100%);
    --gradient-navy: linear-gradient(135deg, var(--secondary-navy) 0%, var(--secondary-navy-medium) 50%, var(--secondary-navy-light) 100%);
    --gradient-navy-overlay: linear-gradient(135deg, rgba(10, 10, 26, 0.85) 0%, rgba(10, 10, 26, 0.5) 50%, rgba(10, 10, 26, 0.7) 100%);

    /* ===== OVERLAY COLORS ===== */
    --overlay-dark: rgba(0, 0, 0, 0.6);
    --overlay-light: rgba(255, 255, 255, 0.9);
    --overlay-coral: rgba(248, 181, 172, 0.15);
    --overlay-navy: rgba(10, 10, 26, 0.95);

    /* ===== BORDER COLORS ===== */
    --border-light: var(--neutral-gray-200);
    --border-medium: var(--neutral-gray-300);
    --border-dark: var(--neutral-gray-400);
    --border-coral: var(--primary-coral);
    --border-focus: var(--primary-coral-dark);

    /* ===== TYPOGRAPHY ===== */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-headings: 'Poppins', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Font Sizes - Desktop */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
    --text-5xl: 3rem;      /* 48px */
    --text-6xl: 4rem;      /* 64px */

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose: 2;

    /* ===== SPACING (8px Grid) ===== */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */

    /* ===== BORDER RADIUS ===== */
    --radius-sm: 0.25rem;  /* 4px */
    --radius-md: 0.5rem;   /* 8px */
    --radius-lg: 0.75rem;  /* 12px */
    --radius-xl: 1rem;     /* 16px */
    --radius-2xl: 1.5rem;  /* 24px */
    --radius-full: 9999px;

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 1px 2px 0 rgba(62, 36, 36, 0.08);
    --shadow-md: 0 4px 6px -1px rgba(62, 36, 36, 0.12), 0 2px 4px -1px rgba(62, 36, 36, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(62, 36, 36, 0.12), 0 4px 6px -2px rgba(62, 36, 36, 0.06);
    --shadow-xl: 0 20px 25px -5px rgba(62, 36, 36, 0.12), 0 10px 10px -5px rgba(62, 36, 36, 0.06);
    --shadow-2xl: 0 25px 50px -12px rgba(62, 36, 36, 0.25);
    --shadow-card: 0 4px 20px rgba(166, 91, 80, 0.12);
    --shadow-coral: 0 4px 14px rgba(166, 91, 80, 0.20);

    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-slower: 500ms ease;

    /* ===== Z-INDEX SCALE ===== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;

    /* ===== CONTAINER WIDTHS ===== */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;

    /* ===== BREAKPOINTS (for reference) ===== */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}