/* ============================================================================
   DALĀLAH INTELLIGENCE BRANDING SYSTEM
   ============================================================================
   
   Centralized branding assets for consistent identity across:
   - Centaur Workspace dashboard
   - Email briefs
   - Future exports (PDF, slides)
   - Future login/authentication screens
   
   Version: 2.0
   Last Updated: December 2024
   ============================================================================ */

/* ============================================================================
   COLOR PALETTE
   ============================================================================ */

:root {
    /* Primary Brand Colors (from logo) */
    --brand-navy: #0D1B2A;          /* Deep navy background */
    --brand-slate: #1B263B;         /* Slate secondary background */
    --brand-frost: #E0E1DD;         /* Frost white for text */
    --brand-ice: #F5F7FA;           /* Ice white for primary text */
    --brand-teal: #0FA3B1;          /* Teal accent (from network nodes) */
    --brand-cyan: #62B6CB;          /* Cyan highlight */
    
    /* Semantic Colors */
    --color-success: #4caf50;       /* Green for positive states */
    --color-warning: #ff9800;       /* Amber for warnings */
    --color-danger: #f44336;        /* Red for errors/alerts */
    --color-info: #4a9eff;          /* Blue for information */
    
    /* UI Grays (adjusted for brand palette) */
    --gray-900: #0D1B2A;            /* Darkest - matches brand-navy */
    --gray-800: #15202B;
    --gray-700: #1B263B;            /* Matches brand-slate */
    --gray-600: #2A3042;
    --gray-500: #3a4158;
    --gray-400: #5a6178;
    --gray-300: #7a8198;
    --gray-200: #9aa0b3;
    --gray-100: #bac0d3;
    --gray-50: #e8eaed;
    
    /* Background Layers */
    --bg-primary: var(--brand-navy);
    --bg-secondary: var(--brand-slate);
    --bg-tertiary: var(--gray-600);
    --bg-elevated: var(--gray-700);
    
    /* Text Colors */
    --text-primary: var(--brand-ice);
    --text-secondary: var(--gray-200);
    --text-muted: var(--gray-300);
    --text-inverse: var(--gray-900);
    
    /* Border Colors */
    --border-subtle: var(--gray-500);
    --border-medium: var(--gray-400);
    --border-strong: var(--brand-teal);
    
    /* Accent Colors (mapped to brand) */
    --accent-primary: var(--brand-teal);
    --accent-secondary: var(--brand-cyan);
    --accent-success: var(--color-success);
    --accent-warning: var(--color-warning);
    --accent-danger: var(--color-danger);
    --accent-info: var(--color-info);
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

:root {
    /* Font Families */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-secondary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", "Courier New", monospace;
    
    /* Font Sizes */
    --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 */
    
    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    /* Letter Spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
}

/* ============================================================================
   SPACING SYSTEM
   ============================================================================ */

:root {
    --space-xs: 0.25rem;     /* 4px */
    --space-sm: 0.5rem;      /* 8px */
    --space-md: 1rem;        /* 16px */
    --space-lg: 1.5rem;      /* 24px */
    --space-xl: 2rem;        /* 32px */
    --space-2xl: 3rem;       /* 48px */
    --space-3xl: 4rem;       /* 64px */
}

/* ============================================================================
   LOGO & BRANDING ASSETS
   ============================================================================ */

:root {
    --logo-height-sm: 40px;      /* Small - email headers */
    --logo-height-md: 60px;      /* Medium - mobile dashboard */
    --logo-height-lg: 80px;      /* Large - desktop dashboard */
    --logo-height-xl: 100px;     /* Extra large - hero sections */
}

.dalalah-logo {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}

.dalalah-logo-sm {
    height: var(--logo-height-sm);
}

.dalalah-logo-md {
    height: var(--logo-height-md);
}

.dalalah-logo-lg {
    height: var(--logo-height-lg);
}

.dalalah-logo-xl {
    height: var(--logo-height-xl);
}

/* Logo loading optimization */
.dalalah-logo[loading="lazy"] {
    /* Placeholder color matching brand navy */
    background-color: var(--brand-navy);
}

/* ============================================================================
   BRAND GRADIENTS
   ============================================================================ */

:root {
    /* Header gradient (navy to slate) */
    --gradient-header: linear-gradient(135deg, var(--brand-slate) 0%, var(--brand-navy) 100%);
    
    /* Accent gradient (teal to cyan) */
    --gradient-accent: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-cyan) 100%);
    
    /* Subtle overlay gradient */
    --gradient-overlay: linear-gradient(180deg, rgba(13, 27, 42, 0) 0%, rgba(13, 27, 42, 0.8) 100%);
}

/* ============================================================================
   SHADOWS & EFFECTS
   ============================================================================ */

:root {
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.4);
    
    /* Glow effects (for interactive elements) */
    --glow-teal: 0 0 12px rgba(15, 163, 177, 0.4);
    --glow-cyan: 0 0 12px rgba(98, 182, 203, 0.4);
}

/* ============================================================================
   BORDER RADIUS
   ============================================================================ */

:root {
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
}

/* ============================================================================
   TRANSITIONS
   ============================================================================ */

:root {
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
}

/* ============================================================================
   Z-INDEX LAYERS
   ============================================================================ */

:root {
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
}

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

.text-brand-teal {
    color: var(--brand-teal);
}

.text-brand-cyan {
    color: var(--brand-cyan);
}

.bg-brand-navy {
    background-color: var(--brand-navy);
}

.bg-brand-slate {
    background-color: var(--brand-slate);
}

.gradient-header {
    background: var(--gradient-header);
}

.gradient-accent {
    background: var(--gradient-accent);
}

/* ============================================================================
   PRINT STYLES (for future PDF exports)
   ============================================================================ */

@media print {
    :root {
        --bg-primary: #ffffff;
        --bg-secondary: #f5f5f5;
        --text-primary: #000000;
        --text-secondary: #666666;
    }
    
    .dalalah-logo {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */

:root {
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Ensure sufficient contrast for WCAG AA compliance */
@media (prefers-contrast: high) {
    :root {
        --text-primary: #ffffff;
        --text-secondary: #e0e0e0;
        --border-strong: #ffffff;
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   FUTURE USE - TODO COMMENTS
   ============================================================================ */

/* TODO: Add these when features are built:
 * 
 * .dalalah-wordmark - Standalone "Dalālah Intelligence" text logo
 * .dalalah-favicon - Optimized favicon versions (16x16, 32x32, etc.)
 * .pdf-header - Branded header for PDF exports
 * .email-signature - Branded email signature component
 * .login-card - Branded login/authentication screen
 * .certificate-border - Branded border for official documents
 */