/* ==============================================
   NLSTECH BRAND COLORS - Single Source of Truth
   Change colors here to update logo everywhere
   ============================================== */

/* Logo color for dark theme (default) */
:root {
    --logo-color: 59 130 246;  /* Blue - change this to change logo color in dark theme */
    --section-overlay-opacity: 0.08;  /* Opacity for section background overlay in dark theme */
}

/* Logo color for light theme */
[data-theme="light"] {
    --logo-color: 65 105 225;  /* Muted blue - change this to change logo color in light theme */
    --section-overlay-color: 204 213 245;  /* Light blue overlay color for sections */
    --section-overlay-opacity: 0.25;  /* Opacity for section background overlay in light theme */
}

/* Logo color class - applied to all logo hexagons */
.logo-color {
    color: rgb(var(--logo-color));
}

/* Example: To change to green:
   Dark theme:  --logo-color: 34 197 94;   (green-500)
   Light theme: --logo-color: 22 163 74;   (green-600)
*/

/* ==============================================
   LIGHT THEME VARIABLES
   ============================================== */
[data-theme="light"] {
    --bg-primary: 250 250 250;        /* Soft gray, not pure white */
    --bg-secondary: 245 245 245;      /* Subtle gray */
    --bg-tertiary: 238 238 238;       /* Medium gray */
    --text-primary: 30 30 30;         /* Soft black */
    --text-secondary: 75 75 75;       /* Medium gray - WCAG AA compliant */
    --text-tertiary: 95 95 95;        /* Lighter gray - WCAG AA compliant */
    --border-color: 225 225 225;      /* Subtle borders */
    --accent-blue: 65 105 225;        /* Muted blue accent (Royal Blue) */
    --accent-blue-hover: 50 85 200;   /* Darker blue for hover */
}

/* ==============================================
   NAVIGATION STYLES
   ============================================== */

/* Light theme navigation */
[data-theme="light"] nav,
[data-theme="light"] nav.bg-slate-950\/80 {
    background-color: #e1e1e187 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-color: rgb(var(--border-color)) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* ==============================================
   BUTTON STYLES - Single Source of Truth
   ============================================== */

/* Standard button hover animation - applies to all buttons */
.bg-blue-600,
a.bg-blue-600,
button.bg-blue-600 {
    transition: all 0.3s ease;
}

.bg-blue-600:hover,
a.bg-blue-600:hover,
button.bg-blue-600:hover {
    transform: translateX(4px);
}

/* Light theme button styles */
[data-theme="light"] .bg-blue-600 {
    background-color: rgb(var(--accent-blue)) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .bg-blue-600:hover,
[data-theme="light"] .hover\:bg-blue-500:hover {
    background-color: rgb(var(--accent-blue-hover)) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .bg-blue-600:active,
[data-theme="light"] .active\:bg-blue-600:active {
    background-color: rgb(var(--accent-blue)) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
}

/* Ensure white text on blue buttons for proper contrast */
[data-theme="light"] .bg-blue-600,
[data-theme="light"] .bg-blue-500,
[data-theme="light"] a.bg-blue-600,
[data-theme="light"] button.bg-blue-600,
[data-theme="light"] a.bg-blue-500,
[data-theme="light"] button.bg-blue-500 {
    color: white !important;
}

[data-theme="light"] .bg-blue-600:hover,
[data-theme="light"] a.bg-blue-600:hover,
[data-theme="light"] button.bg-blue-600:hover {
    color: white !important;
}