/* Quantum Steel Theme - Bold, Modern, Technical */
/* Inspired by precision instruments and cutting-edge technology */

:root{
    /* Backgrounds - Deep slate with subtle warmth */
    --bg: #F8F9FA;                      /* Cool neutral */
    --surface: #FFFFFF;
    --panel: #E8EAED;                   /* Light steel */
    
    /* Text */
    --text-primary: #1A1D23;            /* Almost black */
    --text-secondary: #4A5568;          /* Slate gray */
    --muted: #6B7280;
    
    /* Accent Colors - Teal & Cyan focus (distinctive for radiation/nuclear) */
    --accent-primary: #0891B2;          /* Deep cyan - primary action */
    --accent-secondary: #06B6D4;        /* Bright cyan - highlights */
    --accent-tertiary: #14B8A6;         /* Teal - support */
    --accent-quaternary: #F59E0B;       /* Amber - warnings/attention */
    
    /* Gradients */
    --accent-gradient: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%);
    --steel-gradient: linear-gradient(135deg, #64748B 0%, #475569 100%);
    
    /* Main accent for links/buttons */
    --accent: #0891B2;
    --accent-hover: #0E7490;
    
    /* Support colors */
    --soft-cyan: rgba(8, 145, 178, 0.1);
    --soft-teal: rgba(20, 184, 166, 0.1);
    --soft-amber: rgba(245, 158, 11, 0.1);
    
    /* Glow effects */
    --glow-cyan: rgba(8, 145, 178, 0.2);
    --glow-teal: rgba(20, 184, 166, 0.2);
    --glow-amber: rgba(245, 158, 11, 0.2);
    
    /* Borders & Shadows */
    --border: #E2E8F0;
    --border-hover: #CBD5E1;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Body background - Subtle tech grid pattern */
body {
    background: linear-gradient(135deg, #F8F9FA 0%, #EDF2F7 100%) !important;
}

body::before {
    background-image: 
        radial-gradient(circle at 15% 25%, rgba(8, 145, 178, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 85% 75%, rgba(20, 184, 166, 0.04) 0%, transparent 50%),
        linear-gradient(90deg, transparent 49%, rgba(8, 145, 178, 0.02) 49%, rgba(8, 145, 178, 0.02) 51%, transparent 51%),
        linear-gradient(0deg, transparent 49%, rgba(8, 145, 178, 0.02) 49%, rgba(8, 145, 178, 0.02) 51%, transparent 51%) !important;
    background-size: 100% 100%, 100% 100%, 50px 50px, 50px 50px;
}

/* Hero overlay - Cyan/Teal gradient */
.hero::before{
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.5) 0%, rgba(20, 184, 166, 0.45) 100%) !important;
}

/* Cards - Individual colors with cyan/teal/amber theme */
.card:nth-child(1)::before {
  background: linear-gradient(90deg, #0891B2, #06B6D4) !important;
}
.card:nth-child(1):hover {
  box-shadow: 0 12px 30px rgba(8, 145, 178, 0.18), 0 20px 40px rgba(8, 145, 178, 0.12) !important;
}

.card:nth-child(2)::before {
  background: linear-gradient(90deg, #14B8A6, #2DD4BF) !important;
}
.card:nth-child(2):hover {
  box-shadow: 0 12px 30px rgba(20, 184, 166, 0.18), 0 20px 40px rgba(20, 184, 166, 0.12) !important;
}

.card:nth-child(3)::before {
  background: linear-gradient(90deg, #F59E0B, #FBBF24) !important;
}
.card:nth-child(3):hover {
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.18), 0 20px 40px rgba(245, 158, 11, 0.12) !important;
}

/* Buttons */
.btn-primary{
  background: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%) !important;
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.25) !important;
}
.btn-primary:hover{
  box-shadow: 0 8px 20px rgba(8, 145, 178, 0.35) !important;
}

.nav-list a.cta{
  background: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%) !important;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.2) !important;
}
.nav-list a.cta:hover{
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3) !important;
}

/* Form focus */
.contact-form input:focus,
.contact-form textarea:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.1), 0 4px 12px rgba(8, 145, 178, 0.15) !important;
}

/* Social links */
.social-links a{
  background: rgba(8, 145, 178, 0.08) !important;
  color: var(--accent) !important;
}
.social-links a:hover{
  background: var(--accent) !important;
  color: #FFFFFF !important;
}

/* Section title underline */
.section-title::after {
  background: linear-gradient(90deg, #0891B2, #14B8A6) !important;
}

/* Publication category badges */
.publication-category {
  color: var(--accent) !important;
  background: rgba(8, 145, 178, 0.1) !important;
}

/* Carousel radio buttons */
.carousel-container input[type="radio"] {
  border-color: var(--accent) !important;
}
.carousel-container input[type="radio"]:checked {
  background-color: var(--accent) !important;
}