/**
 * TraderPadi Brand Theme
 *
 * Color Palette:
 * - Deep Chocolate (#38240D) - Primary, gradient base
 * - Burnt Caramel (#713600) - Secondary accents
 * - Warm Rust (#C05800) - Subtle highlights only
 * - Cream (#FDFBD4) - Light backgrounds, text on dark
 *
 * Design Philosophy:
 * - Deep chocolate dominates for enterprise gravitas
 * - Gradients stay subtle, chocolate-forward
 * - Bright colors used sparingly as accents
 */

:root {
    /* ============================================
       BRAND COLORS
       ============================================ */

    /* Primary Colors */
    --tp-chocolate: #38240D;
    --tp-caramel: #713600;
    --tp-rust: #C05800;
    --tp-cream: #FDFBD4;

    /* Semantic Mappings */
    --tp-primary: var(--tp-chocolate);
    --tp-secondary: var(--tp-caramel);
    --tp-accent: var(--tp-rust);
    --tp-light: var(--tp-cream);

    /* Extended Palette - Lighter Shades (muted, not bright) */
    --tp-chocolate-light: #4a3218;
    --tp-caramel-light: #8a4a10;
    --tp-rust-light: #a86820;
    --tp-cream-dark: #ebe6c0;

    /* Extended Palette - Darker Shades */
    --tp-chocolate-dark: #2a1a08;
    --tp-chocolate-deeper: #1e1206;
    --tp-caramel-dark: #5a2b00;
    --tp-rust-dark: #8a4000;

    /* ============================================
       GRADIENTS (Subtle, chocolate-forward)
       ============================================ */

    /* Primary gradient: Deep chocolate dominant */
    --tp-gradient-primary: linear-gradient(135deg, var(--tp-chocolate-deeper) 0%, var(--tp-chocolate) 40%, var(--tp-caramel-dark) 100%);

    /* Vertical gradient for sidebars - deep and rich */
    --tp-gradient-sidebar: linear-gradient(180deg, var(--tp-chocolate) 0%, var(--tp-chocolate-deeper) 100%);

    /* Subtle gradient for cards and surfaces */
    --tp-gradient-subtle: linear-gradient(135deg, var(--tp-chocolate) 0%, var(--tp-chocolate-light) 100%);

    /* Warm accent gradient - still restrained */
    --tp-gradient-warm: linear-gradient(135deg, var(--tp-chocolate) 0%, var(--tp-caramel) 100%);

    /* Enterprise gradient - deep and professional */
    --tp-gradient-enterprise: linear-gradient(135deg, var(--tp-chocolate-deeper) 0%, var(--tp-chocolate) 50%, var(--tp-caramel-dark) 100%);

    /* Cream gradient for light backgrounds */
    --tp-gradient-light: linear-gradient(135deg, #ffffff 0%, var(--tp-cream-dark) 100%);

    /* ============================================
       SEMANTIC COLORS
       ============================================ */

    /* Backgrounds */
    --tp-bg-dark: var(--tp-chocolate);
    --tp-bg-darker: var(--tp-chocolate-deeper);
    --tp-bg-medium: var(--tp-caramel-dark);
    --tp-bg-light: var(--tp-cream);
    --tp-bg-body: #f9f8f5;
    --tp-bg-card: #ffffff;

    /* Text Colors */
    --tp-text-on-dark: var(--tp-cream);
    --tp-text-on-light: var(--tp-chocolate);
    --tp-text-on-accent: var(--tp-chocolate-deeper);
    --tp-text-muted: #6b5d4d;
    --tp-text-body: #3d3328;

    /* Borders */
    --tp-border-light: rgba(56, 36, 13, 0.1);
    --tp-border-medium: rgba(56, 36, 13, 0.2);
    --tp-border-dark: rgba(56, 36, 13, 0.3);

    /* Shadows - deeper for enterprise feel */
    --tp-shadow-sm: 0 0.125rem 0.25rem rgba(30, 18, 6, 0.12);
    --tp-shadow-md: 0 0.5rem 1rem rgba(30, 18, 6, 0.18);
    --tp-shadow-lg: 0 1rem 3rem rgba(30, 18, 6, 0.25);

    /* ============================================
       STATUS COLORS (Warm-tinted)
       ============================================ */

    --tp-success: #2d6a4f;
    --tp-success-bg: #d8f3dc;
    --tp-warning: #8a5a00;
    --tp-warning-bg: #fff3cd;
    --tp-danger: #8b1a1a;
    --tp-danger-bg: #ffe5e5;
    --tp-info: #005a8a;
    --tp-info-bg: #caf0f8;

    /* ============================================
       LAYOUT VARIABLES
       ============================================ */

    --sidebar-width: 280px;
    --header-height: 60px;
    --border-radius: 0.5rem;
    --border-radius-lg: 1rem;

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

    --tp-transition-fast: 0.15s ease;
    --tp-transition-normal: 0.3s ease;
    --tp-transition-slow: 0.5s ease;
}

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

/* Background Colors */
.bg-tp-chocolate { background-color: var(--tp-chocolate) !important; }
.bg-tp-caramel { background-color: var(--tp-caramel) !important; }
.bg-tp-rust { background-color: var(--tp-rust) !important; }
.bg-tp-cream { background-color: var(--tp-cream) !important; }
.bg-tp-primary { background-color: var(--tp-primary) !important; }
.bg-tp-secondary { background-color: var(--tp-secondary) !important; }
.bg-tp-accent { background-color: var(--tp-accent) !important; }

/* Gradient Backgrounds */
.bg-tp-gradient { background: var(--tp-gradient-primary) !important; }
.bg-tp-gradient-subtle { background: var(--tp-gradient-subtle) !important; }
.bg-tp-gradient-warm { background: var(--tp-gradient-warm) !important; }
.bg-tp-gradient-light { background: var(--tp-gradient-light) !important; }
.bg-tp-gradient-enterprise { background: var(--tp-gradient-enterprise) !important; }

/* Text Colors */
.text-tp-chocolate { color: var(--tp-chocolate) !important; }
.text-tp-caramel { color: var(--tp-caramel) !important; }
.text-tp-rust { color: var(--tp-rust) !important; }
.text-tp-cream { color: var(--tp-cream) !important; }
.text-tp-primary { color: var(--tp-primary) !important; }
.text-tp-secondary { color: var(--tp-secondary) !important; }
.text-tp-accent { color: var(--tp-accent) !important; }

/* Border Colors */
.border-tp-chocolate { border-color: var(--tp-chocolate) !important; }
.border-tp-caramel { border-color: var(--tp-caramel) !important; }
.border-tp-rust { border-color: var(--tp-rust) !important; }
.border-tp-cream { border-color: var(--tp-cream) !important; }

/* ============================================
   BOOTSTRAP OVERRIDES
   ============================================ */

/* Primary button - Cream background with chocolate text */
.btn-primary {
    background-color: var(--tp-cream);
    border-color: var(--tp-caramel);
    color: var(--tp-chocolate-deeper);
    font-weight: 500;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--tp-cream-dark);
    border-color: var(--tp-chocolate);
    color: var(--tp-chocolate-deeper);
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--tp-caramel);
    border-color: var(--tp-caramel);
    color: var(--tp-cream);
}

.btn-primary:disabled {
    background-color: var(--tp-cream);
    border-color: var(--tp-caramel);
    color: var(--tp-chocolate);
    opacity: 0.65;
}

/* Secondary button - Deep chocolate */
.btn-secondary {
    background-color: var(--tp-chocolate);
    border-color: var(--tp-chocolate);
    color: var(--tp-cream);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--tp-chocolate-light);
    border-color: var(--tp-chocolate-light);
    color: var(--tp-cream);
}

.btn-secondary:active,
.btn-secondary.active {
    background-color: var(--tp-chocolate-deeper);
    border-color: var(--tp-chocolate-deeper);
    color: var(--tp-cream);
}

/* Outline variants */
.btn-outline-primary {
    color: var(--tp-chocolate);
    border-color: var(--tp-chocolate);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--tp-chocolate);
    border-color: var(--tp-chocolate);
    color: var(--tp-cream);
}

.btn-outline-secondary {
    color: var(--tp-caramel);
    border-color: var(--tp-caramel);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--tp-caramel);
    border-color: var(--tp-caramel);
    color: var(--tp-cream);
}

/* Links - deeper, more subtle */
a {
    color: var(--tp-caramel);
}

a:hover {
    color: var(--tp-chocolate);
}

/* Form controls */
.form-control:focus,
.form-select:focus {
    border-color: var(--tp-caramel);
    box-shadow: 0 0 0 0.25rem rgba(113, 54, 0, 0.2);
}

/* Form check (checkboxes, radios) */
.form-check-input:checked {
    background-color: var(--tp-chocolate);
    border-color: var(--tp-chocolate);
}

.form-check-input:focus {
    border-color: var(--tp-caramel);
    box-shadow: 0 0 0 0.25rem rgba(113, 54, 0, 0.2);
}

/* Progress bars */
.progress-bar {
    background-color: var(--tp-caramel);
}

/* Pagination */
.page-link {
    color: var(--tp-chocolate);
}

.page-link:hover {
    color: var(--tp-chocolate-deeper);
    background-color: var(--tp-cream);
}

.page-item.active .page-link {
    background-color: var(--tp-chocolate);
    border-color: var(--tp-chocolate);
    color: var(--tp-cream);
}

/* Badges */
.badge.bg-primary {
    background-color: var(--tp-chocolate) !important;
    color: var(--tp-cream) !important;
}

/* Nav pills */
.nav-pills .nav-link.active {
    background-color: var(--tp-chocolate);
    color: var(--tp-cream);
}

.nav-pills .nav-link {
    color: var(--tp-chocolate);
}

.nav-pills .nav-link:hover {
    color: var(--tp-caramel);
}

/* ============================================
   CUSTOM BADGE VARIANTS
   ============================================ */

.badge-chocolate {
    background-color: var(--tp-chocolate);
    color: var(--tp-cream);
}

.badge-caramel {
    background-color: var(--tp-caramel);
    color: var(--tp-cream);
}

.badge-rust {
    background-color: var(--tp-rust);
    color: var(--tp-chocolate-deeper);
}

.badge-cream {
    background-color: var(--tp-cream);
    color: var(--tp-chocolate);
}

/* ============================================
   TEXT SELECTION
   ============================================ */

::selection {
    background-color: var(--tp-caramel);
    color: var(--tp-cream);
}

::-moz-selection {
    background-color: var(--tp-caramel);
    color: var(--tp-cream);
}

/* ============================================
   SCROLLBAR STYLING (WebKit)
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--tp-cream-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--tp-chocolate-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tp-chocolate);
}