/* ================================================================
   AISkill.US — Global Theme
   Segoe UI Variable Display · Gray/Black/White · Light Blue · Skin · Yellow
   All buttons black · SVG icon palette · Subtle animations
   ================================================================ */

:root {
  --black:          #0a0a0a;
  --black-soft:     #141414;
  --gray-900:       #1f1f1f;
  --gray-700:       #525252;
  --gray-500:       #737373;
  --gray-300:       #d4d4d4;
  --gray-200:       #e5e5e5;
  --gray-100:       #f5f5f5;
  --gray-50:        #fafafa;
  --white:          #ffffff;

  --light-blue:       #e8f4fc;
  --light-blue-mid:   #c5dff5;
  --light-blue-accent:#5b9bd5;
  --light-skin:       #fdf6f0;
  --light-skin-mid:   #f5e8dc;
  --light-skin-accent:#b8956f;
  --light-yellow:     #fefce8;
  --light-yellow-mid: #fef08a;
  --light-yellow-accent:#b8860b;

  --font-base: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;

  --btn-bg:        var(--black);
  --btn-bg-hover:  #222222;
  --btn-color:     var(--white);
  --btn-border:    var(--black);
  --btn-shadow:    0 6px 20px rgba(0, 0, 0, .22);

  --transition:    .28s cubic-bezier(.4, 0, .2, 1);
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
}

/* ── Site-wide typography ───────────────────────────────────── */
html,
body,
h1, h2, h3, h4, h5, h6,
p, span, div, li, label,
input, textarea, select, button,
a, td, th, small, strong, em {
  font-family: var(--font-base) !important;
}

body {
  color: var(--gray-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--black);
  line-height: 1.25;
  font-weight: 700;
}

p { color: var(--gray-700); }

/* ── All buttons black ──────────────────────────────────────── */
.btn,
.btn-primary,
.btn-dark,
.btn-outline,
.btn-outline-white,
.btn-verify,
.submit-btn,
.hero-actions .btn-primary,
.hero-actions .btn-verify,
.about-aiskill-btn,
.footer-cta-btn,
.sd-cta-btn,
.sd-cta-btn-primary,
.acb__btn--accept,
.acb__btn--customize,
.acb__btn--reject,
.acm__btn--save,
.acm__btn--reject,
.acm__schedule-btn,
.btn-cta-primary,
.btn-cta-secondary,
.navbar-actions .btn-primary,
.drawer-actions .btn-primary,
.drawer-actions .btn-verify,
button.submit-btn {
  background: var(--btn-bg) !important;
  color: var(--btn-color) !important;
  border: 2px solid var(--btn-border) !important;
  font-family: var(--font-base) !important;
  font-weight: 600;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition) !important;
}

.btn-cta-primary:hover,
.btn-cta-secondary:hover,
button.submit-btn:hover {
  background: var(--btn-bg-hover) !important;
  border-color: var(--btn-bg-hover) !important;
}

.btn:hover,
.btn-primary:hover,
.btn-dark:hover,
.btn-outline:hover,
.btn-outline-white:hover,
.btn-verify:hover,
.submit-btn:hover,
.hero-actions .btn-primary:hover,
.hero-actions .btn-verify:hover,
.about-aiskill-btn:hover,
.footer-cta-btn:hover,
.sd-cta-btn:hover,
.acb__btn--accept:hover,
.acb__btn--customize:hover,
.acm__btn--save:hover,
.acm__schedule-btn:hover,
.navbar-actions .btn-primary:hover,
.drawer-actions .btn-primary:hover {
  background: var(--btn-bg-hover) !important;
  color: var(--btn-color) !important;
  border-color: var(--btn-bg-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow);
}

.btn:active,
.btn-primary:active { transform: translateY(0); }

/* Navbar verify/login — subtle glass on dark bar, still dark fill on hover */
.navbar-actions .btn-verify:not(.btn-primary) {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: var(--white) !important;
}
.navbar-actions .btn-verify:not(.btn-primary):hover {
  background: var(--btn-bg) !important;
  border-color: var(--btn-bg) !important;
}

/* Reject buttons stay light gray (secondary action, not CTA) */
.acb__btn--reject,
.acm__btn--reject {
  background: var(--gray-100) !important;
  color: var(--gray-900) !important;
  border-color: var(--gray-300) !important;
}
.acb__btn--reject:hover,
.acm__btn--reject:hover {
  background: var(--gray-200) !important;
  border-color: var(--gray-300) !important;
  color: var(--black) !important;
  box-shadow: none !important;
  transform: none;
}

/* ── SVG icon color system ──────────────────────────────────── */
.icon,
.icon svg,
svg.icon {
  flex-shrink: 0;
  vertical-align: middle;
}

.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.icon-wrap--blue   { background: var(--light-blue);   color: var(--light-blue-accent); }
.icon-wrap--skin   { background: var(--light-skin);   color: var(--light-skin-accent); }
.icon-wrap--yellow { background: var(--light-yellow); color: var(--light-yellow-accent); }
.icon-wrap--gray   { background: var(--gray-100);     color: var(--gray-700); }
.icon-wrap--black  { background: var(--black);        color: var(--white); }

.icon-wrap:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }

.mega-icon,
.contact-detail-adv-icon,
.avc-icon,
.value-icon-wrap,
.why-feat-icon,
.dir-stat-icon,
.about-stat-icon,
.impact-icon,
.mv-icon-wrap {
  background: var(--light-blue) !important;
  color: var(--light-blue-accent) !important;
  border: 1px solid var(--light-blue-mid) !important;
}

.mega-icon.accent-blue,
.icon-blue   { background: var(--light-blue) !important;   color: var(--light-blue-accent) !important; border-color: var(--light-blue-mid) !important; }
.mega-icon.accent-amber,
.icon-yellow { background: var(--light-yellow) !important; color: var(--light-yellow-accent) !important; border-color: var(--light-yellow-mid) !important; }
.mega-icon.accent-teal,
.icon-skin   { background: var(--light-skin) !important; color: var(--light-skin-accent) !important; border-color: var(--light-skin-mid) !important; }
.mega-icon.accent-red,
.icon-gray   { background: var(--gray-100) !important; color: var(--gray-700) !important; border-color: var(--gray-200) !important; }
.mega-icon.accent-purple { background: var(--light-blue) !important; color: #6b7fd7 !important; border-color: var(--light-blue-mid) !important; }
.mega-icon.accent-coral  { background: var(--light-skin) !important; color: #c47a5a !important; border-color: var(--light-skin-mid) !important; }

/* ── Section backgrounds (soft palette) ─────────────────────── */
.section-alt-blue   { background: var(--light-blue); }
.section-alt-skin   { background: var(--light-skin); }
.section-alt-yellow { background: var(--light-yellow); }
.section-alt-gray   { background: var(--gray-50); }

/* ── Cards & interactive surfaces ───────────────────────────── */
.service-card,
.research-card,
.team-card,
.form-card,
.auth-card {
  border-color: var(--gray-200);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.service-card:hover,
.research-card:hover,
.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
  border-color: var(--light-blue-mid);
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes theme-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes theme-pulse-soft {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .7; transform: scale(.92); }
}

@keyframes theme-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-in {
  animation: theme-fade-up .7s ease forwards;
}

.section-label,
.hero-badge,
.section-header .section-label {
  background: var(--light-blue);
  color: var(--light-blue-accent);
  border: 1px solid var(--light-blue-mid);
}

.page-hero,
.hero {
  background: linear-gradient(135deg, var(--black) 0%, var(--gray-900) 55%, #1a2a3a 100%);
}

.cta-section {
  background: linear-gradient(135deg, var(--light-blue) 0%, var(--light-skin) 50%, var(--light-yellow) 100%);
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-control:focus {
  border-color: var(--light-blue-accent) !important;
  box-shadow: 0 0 0 3px rgba(91, 155, 213, .18) !important;
}

/* ── Links ──────────────────────────────────────────────────── */
a:not(.btn):not(.nav-link):not(.mega-item):not(.service-card):hover {
  color: var(--light-blue-accent);
}