/* WESTCUBE DESIGN TOKENS */
/* Auto-generated design system tokens */

:root {
    /* Surface Colors (replace bg-gray-*) */
    --color-surface-primary: #111827;    /* was bg-gray-900 */
    --color-surface-secondary: #1f2937;  /* was bg-gray-800 */
    --color-surface-tertiary: #374151;   /* was bg-gray-700 */

    /* Text Colors (replace text-gray-*) */
    --color-token-primary: #d1d5db;     /* was text-gray-300 */
    --color-token-secondary: #9ca3af;   /* was text-gray-400 */
    --color-token-tertiary: #6b7280;    /* was text-gray-500 */
    --color-token-muted: #4b5563;       /* was text-gray-600 */

    /* Border Colors */
    --color-token-border: #4b5563;      /* was border-gray-600 */

    /* =================================================================
       WESTCUBE SEMANTIC COLOR SYSTEM (Training Dashboard Standard)
       ================================================================= */

    /* Primary Color System (MSG Green) */
    --wc-color-primary: #3AAA35;           /* MSG green */
    --wc-color-primary-hover: #4bc045;     /* MSG green light */
    --wc-color-primary-light: #86e080;     /* green-200 */
    --wc-color-primary-bg: rgba(58, 170, 53, 0.2);   /* MSG green/20 */
    --wc-color-primary-border: #2d8829;    /* MSG green dark */
    --wc-color-primary-shadow: rgba(58, 170, 53, 0.35); /* MSG green/35 */

    /* Success Color System (Green) */
    --wc-color-success: #15803d;           /* green-700 */
    --wc-color-success-hover: #16a34a;     /* green-600 */
    --wc-color-success-light: #86efac;     /* green-200 */
    --wc-color-success-bg: rgba(21, 128, 61, 0.2);   /* green-700/20 */
    --wc-color-success-border: #166534;    /* green-800 */
    --wc-color-success-shadow: rgba(34, 197, 94, 0.25); /* green-500/25 */

    /* Warning Color System (Yellow) */
    --wc-color-warning: #a16207;           /* yellow-700 */
    --wc-color-warning-hover: #ca8a04;     /* yellow-600 */
    --wc-color-warning-light: #fde047;     /* yellow-200 */
    --wc-color-warning-bg: rgba(161, 98, 7, 0.2);    /* yellow-700/20 */
    --wc-color-warning-border: #92400e;    /* yellow-800 */
    --wc-color-warning-shadow: rgba(234, 179, 8, 0.25); /* yellow-500/25 */

    /* Info Color System (Purple) */
    --wc-color-info: #7c2d12;              /* purple-700 */
    --wc-color-info-hover: #9333ea;        /* purple-600 */
    --wc-color-info-light: #c4b5fd;        /* purple-200 */
    --wc-color-info-bg: rgba(124, 45, 18, 0.2);      /* purple-700/20 */
    --wc-color-info-border: #581c87;       /* purple-800 */
    --wc-color-info-shadow: rgba(168, 85, 247, 0.25); /* purple-500/25 */

    /* Danger Color System (Red) */
    --wc-color-danger: #b91c1c;            /* red-700 */
    --wc-color-danger-hover: #dc2626;      /* red-600 */
    --wc-color-danger-light: #fca5a5;      /* red-200 */
    --wc-color-danger-bg: rgba(185, 28, 28, 0.2);    /* red-700/20 */
    --wc-color-danger-border: #991b1b;     /* red-800 */
    --wc-color-danger-shadow: rgba(239, 68, 68, 0.25); /* red-500/25 */

    /* Neutral Color System */
    --wc-color-neutral: rgba(255, 255, 255, 0.1);     /* border-token */
    --wc-color-neutral-hover: rgba(255, 255, 255, 0.15); /* surface-tertiary */
    --wc-color-neutral-light: #d1d5db;     /* gray-300 */
    --wc-color-neutral-bg: rgba(255, 255, 255, 0.05); /* surface-secondary */
    --wc-color-neutral-border: rgba(255, 255, 255, 0.1); /* border-token */
    --wc-color-neutral-shadow: rgba(255, 255, 255, 0.1); /* white/10 */
}

/* Utility Classes */
.bg-surface-primary { background-color: var(--color-surface-primary); }
.bg-surface-secondary { background-color: var(--color-surface-secondary); }
.bg-surface-tertiary { background-color: var(--color-surface-tertiary); }

.text-token-primary { color: var(--color-token-primary); }
.text-token-secondary { color: var(--color-token-secondary); }
.text-token-tertiary { color: var(--color-token-tertiary); }
.text-token-muted { color: var(--color-token-muted); }

.border-token { border-color: var(--color-token-border); }

/* =======================================================================
   WESTCUBE STANDARDIZED BUTTON SYSTEM
   =======================================================================

   MANDATORY: Use these classes for consistent button styling across site.
   ROLLBACK SAFE: Maintains existing functionality while adding enhancements.

   Usage: class="wc-btn-base wc-btn-primary" or "wc-btn-base wc-btn-success"
   ======================================================================= */

.wc-btn-base {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(0);
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.wc-btn-base:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* Primary Button (Blue) */
.wc-btn-primary {
    background-color: var(--wc-color-primary);
    color: white;
}

.wc-btn-primary:hover {
    background-color: var(--wc-color-primary-hover);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3), 0 0 20px var(--wc-color-primary-shadow);
    color: white;
}

/* Success Button (Green) */
.wc-btn-success {
    background-color: var(--wc-color-success);
    color: white;
}

.wc-btn-success:hover {
    background-color: var(--wc-color-success-hover);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3), 0 0 20px var(--wc-color-success-shadow);
    color: white;
}

/* Warning Button (Yellow) */
.wc-btn-warning {
    background-color: var(--wc-color-warning);
    color: white;
}

.wc-btn-warning:hover {
    background-color: var(--wc-color-warning-hover);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3), 0 0 20px var(--wc-color-warning-shadow);
    color: white;
}

/* Info Button (Purple) */
.wc-btn-info {
    background-color: var(--wc-color-info);
    color: white;
}

.wc-btn-info:hover {
    background-color: var(--wc-color-info-hover);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3), 0 0 20px var(--wc-color-info-shadow);
    color: white;
}

/* Danger Button (Red) */
.wc-btn-danger {
    background-color: var(--wc-color-danger);
    color: white;
}

.wc-btn-danger:hover {
    background-color: var(--wc-color-danger-hover);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3), 0 0 20px var(--wc-color-danger-shadow);
    color: white;
}

/* Secondary/Glass Button */
.wc-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid var(--wc-color-neutral-border);
    color: white;
}

.wc-btn-secondary:hover {
    background: var(--wc-color-neutral-hover);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3), 0 0 20px var(--wc-color-neutral-shadow);
    color: white;
}

/* White Button (for public pages) */
.wc-btn-white {
    background-color: white;
    color: black;
}

.wc-btn-white:hover {
    background-color: #f3f4f6; /* gray-100 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    color: black;
}

/* Size Variants */
.wc-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.wc-btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
}

.wc-btn-full {
    width: 100%;
}

/* Round Variant (for homepage style buttons) */
.wc-btn-round {
    border-radius: 9999px;
    padding: 1rem 2rem;
}

/* =======================================================================
   UNIVERSAL BUTTON PATTERNS - REPLACES ALL HARDCODED STYLES
   =======================================================================

   These classes replace ALL manual button styling for complete uniformity
   ======================================================================= */

/* Border Button (Secondary style) */
.wc-btn-border {
    background: transparent;
    border: 1px solid var(--wc-color-neutral-border);
    color: white;
}

.wc-btn-border:hover {
    background: white;
    color: black;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}




/* =======================================================================
   UNIVERSAL FORM INPUT STYLING
   =======================================================================

   Standard dark theme input styling that works consistently everywhere
   Only targets actual form input elements, not labels or other text
   ======================================================================= */

/* Universal input field styling for dark theme - ONLY form inputs */
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="search"],
form textarea,
form select {
    background-color: var(--color-surface-secondary);
    color: white;
    border: 1px solid #1e40af; /* dark blue border */
}

/* Placeholder styling - ONLY form inputs */
form input::placeholder,
form textarea::placeholder {
    color: var(--color-token-secondary);
}

/* Focus states - ONLY form inputs */
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form input[type="search"]:focus,
form textarea:focus,
form select:focus {
    outline: none;
    box-shadow: 0 0 0 1px #2563eb; /* blue focus ring - thinner */
    border-color: #2563eb; /* blue focus border */
}

/* Checkbox and radio styling - ONLY form inputs */
form input[type="checkbox"],
form input[type="radio"] {
    background-color: var(--color-surface-secondary);
    border: 1px solid #1e40af; /* dark blue border */
}

/* =======================================================================
   LEGACY COMPATIBILITY
   =======================================================================

   Maintains existing hover-lift and glass-effect classes for compatibility.
   ======================================================================= */

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.glass-effect {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}