/* =======================================================
   APPLE GLASS DESIGN SYSTEM
   Frosted glass cards and buttons — light + dark mode
   ======================================================= */

/* --- Per-theme glass variables --- */
body:not(.dark) {
  --glass-card-bg:           rgba(255, 255, 255, 0.62);
  --glass-card-border:       rgba(255, 255, 255, 0.55);
  --glass-card-shadow:
    0 4px 20px rgba(0, 0, 0, 0.05),
    0 1px 4px  rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --glass-card-hover-shadow:
    0 8px 32px rgba(0, 0, 0, 0.09),
    0 2px 8px  rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --glass-card-hover-border: rgba(41, 148, 209, 0.25);

  --glass-ghost-bg:          rgba(255, 255, 255, 0.58);
  --glass-ghost-border:      rgba(41, 148, 209, 0.2);
  --glass-ghost-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --glass-ghost-hover-shadow:
    0 4px 14px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.dark {
  --glass-card-bg:           rgba(36, 36, 42, 0.62);
  --glass-card-border:       rgba(255, 255, 255, 0.07);
  --glass-card-shadow:
    0 4px 20px rgba(0, 0, 0, 0.45),
    0 1px 4px  rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --glass-card-hover-shadow:
    0 8px 32px rgba(0, 0, 0, 0.55),
    0 2px 8px  rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-card-hover-border: rgba(209, 163, 255, 0.22);

  --glass-ghost-bg:          rgba(50, 50, 58, 0.55);
  --glass-ghost-border:      rgba(255, 255, 255, 0.1);
  --glass-ghost-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --glass-ghost-hover-shadow:
    0 4px 14px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* =======================================================
   CARDS
   ======================================================= */
#about .about-card,
.experience-item,
#education .card,
#feedback .card,
#projects .card,
#experience .milestone-card,
#single .card-box {
  background: var(--glass-card-bg) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--glass-card-border) !important;
  box-shadow: var(--glass-card-shadow) !important;
  border-radius: 1rem !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

#about .about-card:hover,
.experience-item:hover,
#education .card:hover,
#feedback .card:hover,
#projects .card:hover,
#experience .milestone-card:hover,
#single .card-box:hover {
  box-shadow: var(--glass-card-hover-shadow) !important;
  border-color: var(--glass-card-hover-border) !important;
}

/* =======================================================
   PRIMARY (FILLED) BUTTONS
   ======================================================= */
#experience .featuredLink a.btn,
#education .card .card-body a.btn,
#projects .btn,
.btn-outline-info.btn-sm {
  background: color-mix(in srgb, var(--primary-color) 82%, transparent) !important;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 2px 12px color-mix(in srgb, var(--primary-color) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

#experience .featuredLink a.btn:hover,
#education .card .card-body a.btn:hover,
#projects .btn:hover,
.btn-outline-info.btn-sm:hover {
  background: color-mix(in srgb, var(--primary-color) 95%, transparent) !important;
  box-shadow:
    0 4px 18px color-mix(in srgb, var(--primary-color) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-2px);
  filter: none !important;
}

/* =======================================================
   GHOST / OUTLINE BUTTONS
   ======================================================= */
#hero a.btn.social-icon,
#feedback .btn,
.filter-toggle-btn-compact,
#experience .milestones-toggle {
  background: var(--glass-ghost-bg) !important;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--glass-ghost-border) !important;
  box-shadow: var(--glass-ghost-shadow) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

#hero a.btn.social-icon:hover,
#feedback .btn:hover,
.filter-toggle-btn-compact:hover,
#experience .milestones-toggle:hover {
  border-color: color-mix(in srgb, var(--primary-color) 45%, transparent) !important;
  box-shadow: var(--glass-ghost-hover-shadow) !important;
  transform: translateY(-1px);
}

/* =======================================================
   ACHIEVEMENT ITEMS — micro-glass hover
   ======================================================= */
a.achievement-item:hover {
  background: var(--glass-ghost-bg) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}