/**
 * Base Styling - Skorly.ai Design Tokens
 * Color scheme: Navy (#1B2A4A) + Orange (#F26722)
 */

/* ========================================
   CSS Color Variables
   ======================================== */
:root {
    /* Primary Color Palette — Skorly Brand */
    --light-blue: #00BCD4;      /* Cyan accent */
    --cool-steel: #4CAF50;      /* Green accent */
    --blue-slate: #1B2A4A;      /* Navy — primary dark */
    --beige: #F8F9FC;           /* Gray-50 — page background */
    --vibrant-coral: #F26722;   /* Orange — primary accent */

    /* New Skorly Extended Palette */
    --navy: #1B2A4A;
    --orange: #F26722;
    --orange-hover: #D95A1B;
    --orange-light: #FFF3EB;
    --magenta: #E91E8C;
    --cyan: #00BCD4;
    --yellow: #FFC107;
    --green: #4CAF50;

    /* Neutral Scale */
    --gray-50: #F8F9FC;
    --gray-100: #EEF0F6;
    --gray-200: #D8DCE6;
    --gray-400: #8E95A9;
    --gray-600: #5A6178;
    --gray-800: #2C3347;
    --black: #0D0D0D;

    /* Color Variations (Light) */
    --light-blue-light: rgba(0, 188, 212, 0.1);
    --cool-steel-light: rgba(76, 175, 80, 0.1);
    --blue-slate-light: rgba(27, 42, 74, 0.1);
    --beige-light: rgba(248, 249, 252, 0.1);
    --vibrant-coral-light: rgba(242, 103, 34, 0.1);

    /* Color Variations (Dark) */
    --light-blue-dark: #0097a7;
    --cool-steel-dark: #388e3c;
    --blue-slate-dark: #111C33;
    --beige-dark: #EEF0F6;
    --vibrant-coral-dark: #D95A1B;

    /* Semantic Color Mapping */
    --primary-color: var(--vibrant-coral);
    --primary-hover: var(--vibrant-coral-dark);
    --primary-light: var(--vibrant-coral-light);

    --secondary-color: var(--blue-slate);
    --secondary-hover: var(--blue-slate-dark);
    --secondary-light: var(--blue-slate-light);

    --accent-color: var(--vibrant-coral);
    --accent-hover: var(--vibrant-coral-dark);
    --accent-light: var(--vibrant-coral-light);

    /* Status Colors */
    --success-color: #22C55E;
    --danger-color: #EF4444;
    --warning-color: #F59E0B;
    --info-color: #3B82F6;

    /* Neutral Colors */
    --dark-bg: var(--blue-slate);
    --light-bg: var(--beige);
    --medium-bg: var(--gray-100);
    --white: #FFFFFF;
    --border-color: var(--gray-200);
    --text-primary: var(--blue-slate);
    --text-secondary: var(--gray-600);
    --text-muted: var(--gray-400);
    --text-on-dark: var(--gray-50);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--blue-slate) 0%, #2d4272 100%);
    --gradient-secondary: linear-gradient(180deg, var(--beige), var(--gray-100));
    --gradient-accent: linear-gradient(135deg, var(--vibrant-coral) 0%, #f7943e 100%);
    --gradient-radial: radial-gradient(circle, rgba(242, 103, 34, 0.15) 0%, transparent 70%);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(27, 42, 74, 0.08), 0 4px 16px rgba(27, 42, 74, 0.04);
    --shadow-md: 0 4px 12px rgba(27, 42, 74, 0.12), 0 8px 32px rgba(27, 42, 74, 0.06);
    --shadow-lg: 0 10px 25px rgba(27, 42, 74, 0.15);
    --shadow-xl: 0 20px 50px rgba(27, 42, 74, 0.2);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Layout */
    --top-nav-height: 60px;
    --sidebar-width: 250px;
    --email-list-width: 380px;
    --chat-panel-width: 400px;
}

/* ========================================
   Base Styles
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    overflow: hidden;
    background: var(--light-bg);
    color: var(--text-primary);
    line-height: 1.6;
}

/* ========================================
   Scrollbar Styling
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--cool-steel);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cool-steel-dark);
}

/* ========================================
   Utility Classes
   ======================================== */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-accent {
    background-color: var(--accent-color) !important;
}

.text-primary {
    color: var(--text-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}