/*******************************
    ZERO HOUR BRAND GUIDELINES
    Brand Colors Implementation
*******************************/

/*----------------------------------------*/
/*  Brand Color Variables
/*----------------------------------------*/
:root {
    /* ===== PRIMARY BRAND COLORS ===== */
    
    /* 01. Vibrant Orange - Primary Brand Color */
    --pbmit-global-color: #FF5722;
    --pbmit-global-color-rgb: 255, 87, 34;
    
    /* Orange Color Tones */
    --pbmit-orange-100: #FF5722;
    --pbmit-orange-90: #FF6A3D;
    --pbmit-orange-80: #FF7D58;
    --pbmit-orange-70: #FF9073;
    --pbmit-orange-60: #FFA38E;
    --pbmit-orange-50: #FFB6A9;
    --pbmit-orange-40: #FFC9C4;
    --pbmit-orange-30: #FFDCDF;
    --pbmit-orange-20: #FFEFEF;
    --pbmit-orange-10: #FFF8F7;
    
    /* 02. Carbon Black - Secondary Brand Color */
    --pbmit-blackish-color: #00112E;
    --pbmit-blackish-color-rgb: 0, 17, 46;
    
    /* Black Color Tones */
    --pbmit-black-100: #00112E;
    --pbmit-black-90: #1A2741;
    --pbmit-black-80: #333D54;
    --pbmit-black-70: #4D5367;
    --pbmit-black-60: #66697A;
    --pbmit-black-50: #80838D;
    --pbmit-black-40: #999CA0;
    --pbmit-black-30: #B3B5B3;
    --pbmit-black-20: #CCCEC6;
    --pbmit-black-10: #E6E7D9;
    
    /* 03. Soft Ivory - Accent/Background Color */
    --pbmit-light-color: #F5F4EE;
    --pbmit-light-color-rgb: 245, 244, 238;
    
    /* White Color */
    --pbmit-white-color: #FFFFFF;
    --pbmit-white-color-rgb: 255, 255, 255;
    
    /* ===== COLOR HARMONY SYSTEM ===== */
    
    /* Warm Tones (Complementary) */
    --pbmit-warm-red: #E74C3C;
    --pbmit-warm-orange: #FF6B3D;
    --pbmit-warm-amber: #FFB347;
    --pbmit-warm-yellow: #FFD700;
    
    /* Cool Tones (Supporting Colors) */
    --pbmit-cool-blue-light: #85C1E9;
    --pbmit-cool-blue: #5DADE2;
    --pbmit-cool-blue-dark: #4A90E2;
    --pbmit-cool-green-light: #9CCC65;
    --pbmit-cool-green: #7CB342;
    --pbmit-cool-teal: #26A69A;
    --pbmit-cool-cyan: #00BCD4;
    
    /* Accent Colors */
    --pbmit-purple-light: #BB8FCE;
    --pbmit-purple: #9B59B6;
    --pbmit-purple-dark: #8E44AD;
    
    /* ===== GRADIENTS ===== */
    
    /* Dark Gradients */
    --pbmit-gradient-dark: linear-gradient(135deg, #00112E 0%, #1A2741 100%);
    --pbmit-gradient-dark-to-light: linear-gradient(180deg, #00112E 0%, #00112E00 100%);
    --pbmit-gradient-dark-overlay: linear-gradient(180deg, #00112EB5 25%, #00112E00 50%);
    
    /* Orange Gradients */
    --pbmit-gradient-orange: linear-gradient(135deg, #FF5722 0%, #FF9073 100%);
    --pbmit-gradient-orange-light: linear-gradient(135deg, #FF7D58 0%, #FFA38E 100%);
    --pbmit-gradient-orange-warm: linear-gradient(135deg, #FF5722 0%, #FFB347 100%);
    
    /* Light Gradients */
    --pbmit-gradient-light: linear-gradient(180deg, #F5F4EE 0%, #FFFFFF 100%);
    --pbmit-gradient-light-reverse: linear-gradient(180deg, #FFFFFF 0%, #F5F4EE 100%);
    
    /* ===== SHADOWS ===== */
    
    /* Primary Shadows (Orange) */
    --pbmit-shadow-orange-sm: 0 2px 10px rgba(255, 87, 34, 0.1);
    --pbmit-shadow-orange-md: 0 4px 20px rgba(255, 87, 34, 0.15);
    --pbmit-shadow-orange-lg: 0 8px 30px rgba(255, 87, 34, 0.2);
    --pbmit-shadow-orange-xl: 0 12px 40px rgba(255, 87, 34, 0.25);
    
    /* Dark Shadows (Black) */
    --pbmit-shadow-dark-sm: 0 2px 10px rgba(0, 17, 46, 0.05);
    --pbmit-shadow-dark-md: 0 4px 20px rgba(0, 17, 46, 0.1);
    --pbmit-shadow-dark-lg: 0 8px 30px rgba(0, 17, 46, 0.15);
    --pbmit-shadow-dark-xl: 0 12px 40px rgba(0, 17, 46, 0.2);
    
    /* Elevated Shadows */
    --pbmit-shadow-elevated: 0 10px 40px rgba(0, 17, 46, 0.12);
    --pbmit-shadow-elevated-hover: 0 15px 50px rgba(0, 17, 46, 0.18);
    
    /* ===== SEMANTIC COLORS ===== */
    
    /* Success (Green from harmony system) */
    --pbmit-success-color: #7CB342;
    --pbmit-success-light: #9CCC65;
    --pbmit-success-dark: #689F38;
    
    /* Error (Red from harmony system) */
    --pbmit-error-color: #E74C3C;
    --pbmit-error-light: #EC7063;
    --pbmit-error-dark: #C0392B;
    
    /* Warning (Yellow from harmony system) */
    --pbmit-warning-color: #FFB347;
    --pbmit-warning-light: #FFD700;
    --pbmit-warning-dark: #FF9800;
    
    /* Info (Blue from harmony system) */
    --pbmit-info-color: #4A90E2;
    --pbmit-info-light: #5DADE2;
    --pbmit-info-dark: #2E6DB5;
    
    /* ===== TYPOGRAPHY COLORS ===== */
    
    /* Heading Colors */
    --pbmit-heading-color: #00112E;
    --pbmit-heading-color-rgb: 0, 17, 46;
    
    /* Body Text Colors */
    --pbmit-body-color: #333D54;
    --pbmit-body-color-rgb: 51, 61, 84;
    
    /* Muted Text */
    --pbmit-muted-color: #66697A;
    --pbmit-muted-color-rgb: 102, 105, 122;
    
    /* Link Colors */
    --pbmit-link-color: #FF5722;
    --pbmit-link-hover-color: #FF6A3D;
    
    /* ===== BORDER COLORS ===== */
    
    --pbmit-border-color: rgba(0, 17, 46, 0.1);
    --pbmit-border-color-light: rgba(0, 17, 46, 0.05);
    --pbmit-border-color-dark: rgba(0, 17, 46, 0.2);
    
    /* ===== OVERLAY COLORS ===== */
    
    --pbmit-overlay-dark: rgba(0, 17, 46, 0.8);
    --pbmit-overlay-dark-light: rgba(0, 17, 46, 0.6);
    --pbmit-overlay-dark-heavy: rgba(0, 17, 46, 0.9);
    
    --pbmit-overlay-orange: rgba(255, 87, 34, 0.8);
    --pbmit-overlay-orange-light: rgba(255, 87, 34, 0.6);
    --pbmit-overlay-orange-heavy: rgba(255, 87, 34, 0.9);
}

/*----------------------------------------*/
/*  Global Color Applications
/*----------------------------------------*/

/* Body & Background */
body {
    color: var(--pbmit-body-color);
    background-color: var(--pbmit-light-color);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--pbmit-heading-color);
}

/* Links */
a {
    color: var(--pbmit-link-color);
}

a:hover,
a:focus {
    color: var(--pbmit-link-hover-color);
}

/* Selection */
::selection {
    background-color: var(--pbmit-global-color);
    color: var(--pbmit-white-color);
}

::-moz-selection {
    background-color: var(--pbmit-global-color);
    color: var(--pbmit-white-color);
}

/*----------------------------------------*/
/*  Button Styles
/*----------------------------------------*/

/* Primary Button - Vibrant Orange */
.btn-primary,
.pbmit-btn,
.pbmit-btn-global {
    background-color: var(--pbmit-global-color);
    border-color: var(--pbmit-global-color);
    color: var(--pbmit-white-color);
    box-shadow: var(--pbmit-shadow-orange-sm);
    transition: all 0.3s ease;
}

.btn-primary:hover,
.pbmit-btn:hover,
.pbmit-btn-global:hover {
    background-color: var(--pbmit-orange-90);
    border-color: var(--pbmit-orange-90);
    box-shadow: var(--pbmit-shadow-orange-md);
    transform: translateY(-2px);
}

/* Secondary Button - Carbon Black */
.btn-secondary,
.pbmit-btn-secondary {
    background-color: var(--pbmit-blackish-color);
    border-color: var(--pbmit-blackish-color);
    color: var(--pbmit-white-color);
    box-shadow: var(--pbmit-shadow-dark-sm);
    transition: all 0.3s ease;
}

.btn-secondary:hover,
.pbmit-btn-secondary:hover {
    background-color: var(--pbmit-black-90);
    border-color: var(--pbmit-black-90);
    box-shadow: var(--pbmit-shadow-dark-md);
    transform: translateY(-2px);
}

/* Outline Button */
.btn-outline,
.pbmit-btn-outline {
    background-color: transparent;
    border: 2px solid var(--pbmit-global-color);
    color: var(--pbmit-global-color);
    transition: all 0.3s ease;
}

.btn-outline:hover,
.pbmit-btn-outline:hover {
    background-color: var(--pbmit-global-color);
    color: var(--pbmit-white-color);
    box-shadow: var(--pbmit-shadow-orange-md);
}

/*----------------------------------------*/
/*  Form Elements
/*----------------------------------------*/

/* Input Fields */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
    border-color: var(--pbmit-border-color);
    color: var(--pbmit-body-color);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--pbmit-global-color);
    box-shadow: 0 0 0 0.2rem rgba(255, 87, 34, 0.15);
    outline: none;
}

/* Labels */
label,
.form-label {
    color: var(--pbmit-heading-color);
}

/* Placeholder */
::placeholder {
    color: var(--pbmit-muted-color);
    opacity: 0.6;
}

/*----------------------------------------*/
/*  Background Color Classes
/*----------------------------------------*/

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

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

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

.pbmit-bg-gradient-orange {
    background: var(--pbmit-gradient-orange) !important;
}

.pbmit-bg-gradient-dark {
    background: var(--pbmit-gradient-dark) !important;
}

/*----------------------------------------*/
/*  Text Color Classes
/*----------------------------------------*/

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

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

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

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

/*----------------------------------------*/
/*  Border Color Classes
/*----------------------------------------*/

.pbmit-border-color-global {
    border-color: var(--pbmit-global-color) !important;
}

.pbmit-border-color-blackish {
    border-color: var(--pbmit-blackish-color) !important;
}

.pbmit-border-color-light {
    border-color: var(--pbmit-border-color) !important;
}

/*----------------------------------------*/
/*  Icon Colors
/*----------------------------------------*/

.pbmit-icon-color-global i,
.pbmit-icon-color-global svg {
    color: var(--pbmit-global-color);
    fill: var(--pbmit-global-color);
}

.pbmit-icon-color-blackish i,
.pbmit-icon-color-blackish svg {
    color: var(--pbmit-blackish-color);
    fill: var(--pbmit-blackish-color);
}

/*----------------------------------------*/
/*  Card & Component Styles
/*----------------------------------------*/

.card,
.pbmit-card {
    background-color: var(--pbmit-white-color);
    border: 1px solid var(--pbmit-border-color);
    box-shadow: var(--pbmit-shadow-dark-sm);
    transition: all 0.3s ease;
}

.card:hover,
.pbmit-card:hover {
    box-shadow: var(--pbmit-shadow-dark-lg);
    transform: translateY(-5px);
}

/* Featured Card with Orange Accent */
.card-featured,
.pbmit-card-featured {
    border-left: 4px solid var(--pbmit-global-color);
}

/*----------------------------------------*/
/*  Alert/Notification Styles
/*----------------------------------------*/

.alert-success {
    background-color: rgba(124, 179, 66, 0.1);
    border-color: var(--pbmit-success-color);
    color: var(--pbmit-success-dark);
}

.alert-error,
.alert-danger {
    background-color: rgba(231, 76, 60, 0.1);
    border-color: var(--pbmit-error-color);
    color: var(--pbmit-error-dark);
}

.alert-warning {
    background-color: rgba(255, 179, 71, 0.1);
    border-color: var(--pbmit-warning-color);
    color: var(--pbmit-warning-dark);
}

.alert-info {
    background-color: rgba(74, 144, 226, 0.1);
    border-color: var(--pbmit-info-color);
    color: var(--pbmit-info-dark);
}

/*----------------------------------------*/
/*  Utility Classes
/*----------------------------------------*/

/* Shadows */
.shadow-sm { box-shadow: var(--pbmit-shadow-dark-sm); }
.shadow { box-shadow: var(--pbmit-shadow-dark-md); }
.shadow-lg { box-shadow: var(--pbmit-shadow-dark-lg); }
.shadow-xl { box-shadow: var(--pbmit-shadow-dark-xl); }

.shadow-orange-sm { box-shadow: var(--pbmit-shadow-orange-sm); }
.shadow-orange { box-shadow: var(--pbmit-shadow-orange-md); }
.shadow-orange-lg { box-shadow: var(--pbmit-shadow-orange-lg); }
.shadow-orange-xl { box-shadow: var(--pbmit-shadow-orange-xl); }

/* Overlays */
.overlay-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--pbmit-overlay-dark);
    z-index: 1;
}

.overlay-orange::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--pbmit-overlay-orange);
    z-index: 1;
}
