/**
 * SafariChat Design System
 * Version: 1.0.0
 * Date: March 6, 2026
 * 
 * This file contains all design tokens (CSS custom properties) for the SafariChat platform.
 * These variables ensure consistency across the entire application.
 * 
 * Usage: Use var(--variable-name) in your CSS or inline styles
 * Example: color: var(--primary-brand);
 */

:root {
    /* ========================================
       PRIMARY BRAND COLORS
       ======================================== */
    --primary-brand: #3B5998;           /* Deep Indigo - main CTA color */
    --primary-hover: #2F4779;           /* Darker for hover states */
    --primary-light: #EBF0FA;           /* Light backgrounds & highlights */
    --primary-dark: #1E2E4F;            /* Very dark for emphasis */

    /* ========================================
       NEUTRAL GRAYS (Light Mode)
       ======================================== */
    --gray-50: #F9FAFB;                 /* Page backgrounds */
    --gray-100: #F3F4F6;                /* Card backgrounds, zebra stripes */
    --gray-200: #E5E7EB;                /* Borders, dividers */
    --gray-300: #D1D5DB;                /* Disabled states */
    --gray-400: #9CA3AF;                /* Placeholders */
    --gray-500: #6B7280;                /* Secondary text */
    --gray-600: #4B5563;                /* Primary text */
    --gray-700: #374151;                /* Headers */
    --gray-800: #1F2937;                /* Dark mode text */
    --gray-900: #111827;                /* Emphasis, darkest text */

    /* ========================================
       SEMANTIC COLORS (Success)
       ======================================== */
    --success-bg: #ECFDF5;              /* Light green background */
    --success-text: #065F46;            /* Dark green text */
    --success-border: #6EE7B7;          /* Medium green border */
    --success-hover: #D1FAE5;           /* Hover background */

    /* ========================================
       SEMANTIC COLORS (Warning)
       ======================================== */
    --warning-bg: #FFFBEB;              /* Light yellow background */
    --warning-text: #92400E;            /* Dark brown text */
    --warning-border: #FCD34D;          /* Yellow border */
    --warning-hover: #FEF3C7;           /* Hover background */

    /* ========================================
       SEMANTIC COLORS (Error/Danger)
       ======================================== */
    --error-bg: #FEF2F2;                /* Light red background */
    --error-text: #991B1B;              /* Dark red text */
    --error-border: #FCA5A5;            /* Red border */
    --error-hover: #FEE2E2;             /* Hover background */

    /* ========================================
       SEMANTIC COLORS (Info)
       ======================================== */
    --info-bg: #EFF6FF;                 /* Light blue background */
    --info-text: #1E40AF;               /* Dark blue text */
    --info-border: #93C5FD;             /* Blue border */
    --info-hover: #DBEAFE;              /* Hover background */

    /* ========================================
       WHATSAPP BRAND (Use sparingly)
       ======================================== */
    --whatsapp-green: #25D366;          /* Official WhatsApp green */
    --whatsapp-light: #E8F8F0;          /* Light WhatsApp background */
    --whatsapp-dark: #128C7E;           /* Dark WhatsApp green */

    /* ========================================
       WHITE & BLACK
       ======================================== */
    --white: #FFFFFF;
    --black: #000000;

    /* ========================================
       TYPOGRAPHY - FONT FAMILY
       ======================================== */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                    'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 
                 Consolas, 'Courier New', monospace;

    /* ========================================
       TYPOGRAPHY - FONT SIZES
       ======================================== */
    --text-xs: 0.75rem;                 /* 12px - Small labels, helper text */
    --text-sm: 0.875rem;                /* 14px - Table data, form inputs */
    --text-base: 1rem;                  /* 16px - Body text, buttons */
    --text-lg: 1.125rem;                /* 18px - Large body text */
    --text-xl: 1.25rem;                 /* 20px - Section headers */
    --text-2xl: 1.5rem;                 /* 24px - Page headers */
    --text-3xl: 1.875rem;               /* 30px - Hero text */
    --text-4xl: 2.25rem;                /* 36px - Marketing headers */
    --text-5xl: 3rem;                   /* 48px - Large marketing */

    /* ========================================
       TYPOGRAPHY - FONT WEIGHTS
       ======================================== */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* ========================================
       TYPOGRAPHY - LINE HEIGHTS
       ======================================== */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    --leading-loose: 2;

    /* ========================================
       TYPOGRAPHY - LETTER SPACING
       ======================================== */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* ========================================
       SPACING SCALE (4px base unit)
       ======================================== */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;              /* 2px */
    --space-1: 0.25rem;                 /* 4px */
    --space-1-5: 0.375rem;              /* 6px */
    --space-2: 0.5rem;                  /* 8px */
    --space-2-5: 0.625rem;              /* 10px */
    --space-3: 0.75rem;                 /* 12px */
    --space-3-5: 0.875rem;              /* 14px */
    --space-4: 1rem;                    /* 16px */
    --space-5: 1.25rem;                 /* 20px */
    --space-6: 1.5rem;                  /* 24px - MOST COMMON */
    --space-7: 1.75rem;                 /* 28px */
    --space-8: 2rem;                    /* 32px */
    --space-9: 2.25rem;                 /* 36px */
    --space-10: 2.5rem;                 /* 40px */
    --space-11: 2.75rem;                /* 44px */
    --space-12: 3rem;                   /* 48px */
    --space-14: 3.5rem;                 /* 56px */
    --space-16: 4rem;                   /* 64px */
    --space-20: 5rem;                   /* 80px */
    --space-24: 6rem;                   /* 96px */

    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-none: 0;
    --radius-sm: 0.375rem;              /* 6px - Small elements */
    --radius-base: 0.5rem;              /* 8px - Inputs, small cards */
    --radius-md: 0.5rem;                /* 8px - Same as base */
    --radius-lg: 0.75rem;               /* 12px - Cards, modals - PRIMARY STANDARD */
    --radius-xl: 1rem;                  /* 16px - Large cards */
    --radius-2xl: 1.25rem;              /* 20px - Feature sections */
    --radius-3xl: 1.5rem;               /* 24px - Extra large */
    --radius-full: 9999px;              /* Pills, badges, circular */

    /* ========================================
       SHADOWS (Elevation System)
       ======================================== */
    --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-none: none;

    /* ========================================
       Z-INDEX SCALE
       ======================================== */
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

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

    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* ========================================
       OPACITY
       ======================================== */
    --opacity-0: 0;
    --opacity-5: 0.05;
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-25: 0.25;
    --opacity-30: 0.3;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-70: 0.7;
    --opacity-75: 0.75;
    --opacity-80: 0.8;
    --opacity-90: 0.9;
    --opacity-95: 0.95;
    --opacity-100: 1;

    /* ========================================
       BREAKPOINTS (for reference in media queries)
       ======================================== */
    --breakpoint-xs: 0;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

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

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Invert gray scale for dark mode */
        --gray-50: #111827;
        --gray-100: #1F2937;
        --gray-200: #374151;
        --gray-300: #4B5563;
        --gray-400: #6B7280;
        --gray-500: #9CA3AF;
        --gray-600: #D1D5DB;
        --gray-700: #E5E7EB;
        --gray-800: #F3F4F6;
        --gray-900: #F9FAFB;

        /* Adjust primary light color for dark mode */
        --primary-light: rgba(59, 89, 152, 0.15);

        /* Adjust white/black */
        --white: #1F2937;
        --black: #F9FAFB;
    }
}

/* Dark mode class override (for manual toggle) */
.dark-mode {
    /* Invert gray scale for dark mode */
    --gray-50: #111827;
    --gray-100: #1F2937;
    --gray-200: #374151;
    --gray-300: #4B5563;
    --gray-400: #6B7280;
    --gray-500: #9CA3AF;
    --gray-600: #D1D5DB;
    --gray-700: #E5E7EB;
    --gray-800: #F3F4F6;
    --gray-900: #F9FAFB;

    /* Adjust primary light color for dark mode */
    --primary-light: rgba(59, 89, 152, 0.15);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Apply the primary font globally */
body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--gray-700);
    background-color: var(--gray-50);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Box sizing reset */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Remove default margins */
h1, h2, h3, h4, h5, h6, p, ul, ol {
    margin: 0;
}

/* Text color utilities */
.text-primary { color: var(--primary-brand) !important; }
.text-gray-50 { color: var(--gray-50) !important; }
.text-gray-100 { color: var(--gray-100) !important; }
.text-gray-200 { color: var(--gray-200) !important; }
.text-gray-300 { color: var(--gray-300) !important; }
.text-gray-400 { color: var(--gray-400) !important; }
.text-gray-500 { color: var(--gray-500) !important; }
.text-gray-600 { color: var(--gray-600) !important; }
.text-gray-700 { color: var(--gray-700) !important; }
.text-gray-800 { color: var(--gray-800) !important; }
.text-gray-900 { color: var(--gray-900) !important; }

.text-success { color: var(--success-text) !important; }
.text-warning { color: var(--warning-text) !important; }
.text-error { color: var(--error-text) !important; }
.text-danger { color: var(--error-text) !important; }
.text-info { color: var(--info-text) !important; }

/* Background color utilities */
.bg-primary { background-color: var(--primary-brand) !important; }
.bg-primary-light { background-color: var(--primary-light) !important; }
.bg-gray-50 { background-color: var(--gray-50) !important; }
.bg-gray-100 { background-color: var(--gray-100) !important; }
.bg-white { background-color: var(--white) !important; }

.bg-success { background-color: var(--success-bg) !important; }
.bg-warning { background-color: var(--warning-bg) !important; }
.bg-error { background-color: var(--error-bg) !important; }
.bg-info { background-color: var(--info-bg) !important; }

/* Font weight utilities */
.font-light { font-weight: var(--font-light) !important; }
.font-normal { font-weight: var(--font-normal) !important; }
.font-medium { font-weight: var(--font-medium) !important; }
.font-semibold { font-weight: var(--font-semibold) !important; }
.font-bold { font-weight: var(--font-bold) !important; }

/* Text size utilities */
.text-xs { font-size: var(--text-xs) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-lg { font-size: var(--text-lg) !important; }
.text-xl { font-size: var(--text-xl) !important; }
.text-2xl { font-size: var(--text-2xl) !important; }
.text-3xl { font-size: var(--text-3xl) !important; }
.text-4xl { font-size: var(--text-4xl) !important; }

/* Border radius utilities */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded { border-radius: var(--radius-base) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-2xl { border-radius: var(--radius-2xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Shadow utilities */
.shadow-none { box-shadow: var(--shadow-none) !important; }
.shadow-xs { box-shadow: var(--shadow-xs) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-base) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }

/* Transition utilities */
.transition {
    transition-property: all;
    transition-duration: var(--transition-base);
    transition-timing-function: var(--ease-in-out);
}

.transition-fast {
    transition-duration: var(--transition-fast);
}

.transition-slow {
    transition-duration: var(--transition-slow);
}