/* Load all switchable fonts — @import must be first in file */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700&family=Space+Grotesk:wght@300..700&display=swap');

/* ════════════════════════════════════════════════════════════════
   VERIDIAN PULSE — CSS Variable Foundation
   Single source of truth for all design tokens.
   All components reference --vp-* vars; legacy aliases keep
   backward compatibility with existing dashboard.css selectors.
════════════════════════════════════════════════════════════════ */

:root {
    /* ═══ CORE BACKGROUNDS ═══ */
    --vp-bg-primary:        #0f1624;
    --vp-bg-secondary:      #222a39;
    --vp-bg-field:          #19202e;
    --vp-bg-body:           #0a101d;
    --vp-bg-card:           #131315;
    --vp-bg-warm:           #2E2619;

    /* ═══ ACCENT / BRAND COLORS ═══ */
    --vp-accent:            #38B9FA;
    --vp-accent-hover:      #38b9fae6;
    --vp-accent-secondary:  #dbb070;
    --vp-accent-bg:         color-mix(in srgb, var(--vp-accent) 10%, transparent);
    --vp-accent-border:     color-mix(in srgb, var(--vp-accent) 20%, transparent);

    /* ═══ TEXT COLORS ═══ */
    --vp-text-primary:      #ffffff;
    --vp-text-secondary:    #98a4b3;
    --vp-text-secondary-a:  rgba(134, 130, 121, 0.7);
    --vp-text-third:        #B3A998;
    --vp-text-grey:         #DDDBD5;
    --vp-text-btn:          #0a111f;
    --vp-text-muted:        #868279;

    /* ═══ BORDERS & SHAPE ═══ */
    --vp-border:            #222a39;
    --vp-radius-sm:         8px;
    --vp-radius-md:         12px;
    --vp-radius-lg:         16px;

    /* ═══ STATUS COLORS ═══ */
    --vp-success:           #34D399;
    --vp-success-bg:        rgba(52, 211, 153, 0.1);
    --vp-danger:            #F87171;
    --vp-danger-bg:         rgba(248, 113, 113, 0.1);
    --vp-warning:           #F97316;
    --vp-warning-bg:        rgba(249, 115, 22, 0.1);
    --vp-required:          #DF3A3A;
    --vp-destructive:       #E45944;

    /* ═══ SEMANTIC TAG COLORS ═══ */
    --vp-blue:              #60A5FA;
    --vp-blue-bg:           rgba(96, 165, 250, 0.1);
    --vp-purple:            #C084FC;
    --vp-purple-bg:         rgba(192, 132, 252, 0.1);
    --vp-cyan:              #38BDF8;
    --vp-cyan-bg:           rgba(56, 189, 248, 0.1);
    --vp-pink:              #EC4899;
    --vp-pink-bg:           rgba(236, 72, 153, 0.1);
    --vp-indigo:            #6366F1;
    --vp-indigo-bg:         rgba(99, 102, 241, 0.1);
    --vp-teal:              #14B8A6;
    --vp-teal-bg:           rgba(20, 184, 166, 0.1);

    /* ═══ TYPOGRAPHY ═══ */
    --vp-font-family:       'Inter', sans-serif;
    --vp-font-size-xs:      10px;
    --vp-font-size-sm:      12px;
    --vp-font-size-base:    14px;
    --vp-font-size-md:      16px;
    --vp-font-size-lg:      18px;
    --vp-font-size-xl:      20px;

    /* ═══ MISC ═══ */
    --vp-transition:        0.3s ease;
    --vp-shadow:            0 8px 24px rgba(0, 0, 0, 0.4);
    --vp-muted-foreground:  220 10% 65%;

    /* ════════════════════════════════════════════════════════════
       LEGACY ALIASES — map old variable names to new --vp-* vars.
       This ensures all existing components continue to work without
       any changes to dashboard.css.
    ════════════════════════════════════════════════════════════ */
    --primary-bg-color:             var(--vp-bg-primary);
    --primary-bg-color-opacity:     var(--vp-bg-body);
    --secondary-bg-color:           var(--vp-bg-secondary);
    --btn-bg-color:                 var(--vp-accent);
    --btn-second-bg-color:          var(--vp-accent-secondary);
    --switch-bg-color:              var(--vp-accent);
    --switch-bg-color-hover:        var(--vp-accent-hover);
    --btn-text-color:               var(--vp-text-btn);
    --icon-bg-color:                var(--vp-accent-bg);
    --primary-text-color:           var(--vp-text-primary);
    --secondary-text-color:         var(--vp-text-secondary);
    --secondary-text-color-alpha:   var(--vp-text-secondary-a);
    --third-text-color:             var(--vp-text-third);
    --secondary-grey-text:          var(--vp-text-grey);
    --field-bg-color:               var(--vp-bg-field);
    --bg-black-color:               var(--vp-bg-body);
    --bg-warm-yellow-color:         var(--vp-bg-warm);
    --sidebar-menu-border-color-active: var(--vp-accent-border);
    --sidebar-menu-bg-color-active:     var(--vp-accent-bg);
    --card-bg-grey-color:           var(--vp-bg-card);
    --card-bg-yellow-color:         var(--vp-accent-bg);
    --card-text-yellow-color:       var(--vp-accent);
    --card-bg-green-color:          var(--vp-success-bg);
    --card-text-green-color:        var(--vp-success);
    --card-bg-red-color:            var(--vp-danger-bg);
    --card-text-red-color:          var(--vp-danger);
    --card-bg-blue-color:           var(--vp-blue-bg);
    --card-text-blue-color:         var(--vp-blue);
    --card-bg-purple-color:         var(--vp-purple-bg);
    --card-text-purple-color:       var(--vp-purple);
    --card-bg-cyan-color:           var(--vp-cyan-bg);
    --card-text-cyan-color:         var(--vp-cyan);
    --card-bg-orange-color:         var(--vp-warning-bg);
    --card-text-orange-color:       var(--vp-warning);
    --card-bg-pink-color:           var(--vp-pink-bg);
    --card-text-pink-color:         var(--vp-pink);
    --card-bg-indigo-color:         var(--vp-indigo-bg);
    --card-text-indigo-color:       var(--vp-indigo);
    --card-text-teal-color:         var(--vp-teal);
    --card-bg-teal-color:           var(--vp-teal-bg);
    --required-color:               var(--vp-required);
    --destructive-color:            var(--vp-destructive);

    /* ── dashboard.html inline vars (legacy) ── */
    --white-text:           var(--vp-text-primary);
    --yellow-text:          var(--vp-accent);
    --grey-text:            var(--vp-text-muted);
    --grey-border:          var(--vp-border);
    --bg-color-black-18:    var(--vp-bg-field);
    --muted-foreground:     var(--vp-muted-foreground);

    /* ════════════════════════════════════════════════════════════
       PUBLIC SITE ALIASES — home.html, about.html, industry pages, etc.
       Map every page-specific var name onto the centralized --vp-* system.
    ════════════════════════════════════════════════════════════ */
    --gold:         var(--vp-accent);
    --gold-dark:    var(--vp-accent-hover);
    --bg:           var(--vp-bg-body);
    --bg2:          var(--vp-bg-body);
    --bg3:          var(--vp-bg-primary);
    --bg4:          var(--vp-bg-card);
    --border:       var(--vp-border);
    --border2:      var(--vp-border);
    --text:         var(--vp-text-primary);
    --text2:        var(--vp-text-secondary);
    --text3:        var(--vp-text-muted);
    --font-body:    var(--vp-font-family);
    --font-head:    var(--vp-font-family);

    /* ── Login / request_access page aliases ── */
    --accent:           var(--vp-accent);
    --accent-dark:      var(--vp-accent-hover);
    --vp-bg:            var(--vp-bg-body);
    --vp-card:          var(--vp-bg-primary);
    --vp-card-bg:       var(--vp-bg-primary);
    --vp-input:         var(--vp-bg-field);
    --vp-input-bg:      var(--vp-bg-field);
    /* ── Industry & Solutions page background aliases ── */
    --bg-dark:          var(--vp-bg-body);
    --bg-card:          var(--vp-bg-primary);
    --bg-card2:         var(--vp-bg-field);
    --black:            var(--vp-bg-body);
    --black-soft:       var(--vp-bg-primary);
    --card-bg:          var(--vp-bg-primary);
    --card-border:      var(--vp-border);
    --card-dark:        var(--vp-bg-primary);

    /* ── Industry & Solutions text aliases ── */
    --text-muted:       var(--vp-text-muted);
    --text-body:        var(--vp-text-secondary);
    --gray-light:       var(--vp-text-secondary);
    --gray-mid:         var(--vp-text-muted);

    /* ── Accent variants used across pages ── */
    --cyan:             var(--vp-accent);
    --cyan-dim:         var(--vp-accent-hover);
    --cyan-glow:        var(--vp-accent);

    /* ── Status color aliases ── */
    --red-warn:         var(--vp-danger);
    --bg-hov_color:     var(--vp-accent-hover);
    --bg-color:         var(--vp-accent);

    /* ── Solutions / Industry card border & white aliases ── */
    --card-border:          var(--vp-accent-border);
    --white:                var(--vp-text-primary);

    /* ── Accent opacity variants (pre-computed, used in rgba() rules) ── */
    --vp-accent-glow:       color-mix(in srgb, var(--vp-accent) 6%, transparent);
    --vp-accent-border-sm:  color-mix(in srgb, var(--vp-accent) 15%, transparent);
    --vp-accent-border-md:  color-mix(in srgb, var(--vp-accent) 35%, transparent);

    /* ── Navbar / mega-menu ── */
    --vp-navbar-bg:         rgba(6,  12, 23,  0.92);
    --vp-menu-bg:           var(--vp-bg-primary);
    --vp-menu-arrow-bg:     var(--vp-bg-primary);
}

/* ════════════════════════════════════════════════════════════
   GLOBAL FONT APPLICATION
   Applies --vp-font-family to body and headings.
   Also overrides Bootstrap's own font CSS variables so Bootstrap
   components (nav-links, buttons, cards, etc.) also switch fonts.
════════════════════════════════════════════════════════════ */

/* Override Bootstrap 5 font variables — these are read by Bootstrap
   internally for body, buttons, headings, and form controls.
   Must be in :root so they cascade into Bootstrap's own rules. */
:root {
    --bs-font-sans-serif:      var(--vp-font-family);
    --bs-body-font-family:     var(--vp-font-family);
    --bs-btn-font-family:      var(--vp-font-family);
}

/* Direct application to structural elements */
html,
body,
h1, h2, h3, h4, h5, h6,
p, a, button, label, input, select, textarea {
    font-family: var(--vp-font-family) !important;
}

/* ════════════════════════════════════════════════════════════
   SWEETALERT2 — full theme integration for all pages
   variables.css is loaded by every page, so these rules apply
   universally without duplication.
════════════════════════════════════════════════════════════ */
.swal2-popup {
    background-color: var(--vp-bg-primary) !important;
    color: var(--vp-text-primary) !important;
    border: 1px solid var(--vp-border) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
}
.swal2-title {
    color: var(--vp-text-primary) !important;
    font-size: 18px !important;
    font-family: var(--vp-font-family) !important;
}
.swal2-html-container {
    color: var(--vp-text-secondary) !important;
    font-size: 14px !important;
    font-family: var(--vp-font-family) !important;
}
.swal2-close {
    color: var(--vp-text-secondary) !important;
}
.swal2-close:hover {
    color: var(--vp-text-primary) !important;
    background: var(--vp-bg-field) !important;
}

/* Buttons */
.swal2-confirm {
    background-color: var(--vp-accent) !important;
    color: var(--vp-text-btn) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    font-family: var(--vp-font-family) !important;
}
.swal2-confirm:hover { background-color: var(--vp-accent-hover) !important; }
.swal2-cancel {
    background-color: var(--vp-bg-field) !important;
    color: var(--vp-text-primary) !important;
    border: 1px solid var(--vp-border) !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    font-family: var(--vp-font-family) !important;
}
.swal2-cancel:hover {
    background-color: var(--vp-bg-secondary) !important;
    border-color: var(--vp-accent) !important;
}
.swal2-deny {
    background-color: var(--vp-danger-bg) !important;
    color: var(--vp-danger) !important;
    border: 1px solid var(--vp-danger) !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    font-family: var(--vp-font-family) !important;
}

/* Timer bar */
.swal2-timer-progress-bar { background: var(--vp-accent) !important; }
.swal2-timer-progress-bar-container { background: var(--vp-bg-field) !important; }

/* Inputs inside Swal */
.swal2-input, .swal2-textarea, .swal2-select, .swal2-file {
    background-color: var(--vp-bg-field) !important;
    color: var(--vp-text-primary) !important;
    border: 1px solid var(--vp-border) !important;
    border-radius: 9px !important;
    font-family: var(--vp-font-family) !important;
}
.swal2-input:focus, .swal2-textarea:focus {
    outline: none !important;
    border-color: var(--vp-accent) !important;
    box-shadow: 0 0 0 3px var(--vp-accent-bg) !important;
}
.swal2-validation-message {
    background-color: var(--vp-danger-bg) !important;
    color: var(--vp-danger) !important;
    border-top: 1px solid var(--vp-danger) !important;
    font-size: 13px !important;
}

/* Status icons */
.swal2-icon.swal2-success {
    border-color: var(--vp-success) !important;
    color: var(--vp-success) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--vp-success-bg) !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--vp-success) !important;
}
.swal2-icon.swal2-error {
    border-color: var(--vp-danger) !important;
    color: var(--vp-danger) !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: var(--vp-danger) !important;
}
.swal2-icon.swal2-warning {
    border-color: var(--vp-warning) !important;
    color: var(--vp-warning) !important;
}
.swal2-icon.swal2-info {
    border-color: var(--vp-blue) !important;
    color: var(--vp-blue) !important;
}
.swal2-icon.swal2-question {
    border-color: var(--vp-accent) !important;
    color: var(--vp-accent) !important;
}
.swal2-loader {
    border-color: var(--vp-accent) transparent var(--vp-accent) transparent !important;
}
.swal2-backdrop-show {
    background: rgba(0,0,0,.6) !important;
    backdrop-filter: blur(4px);
}