@import "tailwindcss";

:root {
  /* Windows 11 Light Theme - Clean, bright, airy with transparency */
  --fluent-bg: #f3f3f3; /* light neutral background */
  --fluent-surface: rgba(
    254,
    254,
    254,
    0.25
  ); /* ultra translucent for stronger glass effect */
  --fluent-surface-secondary: rgba(249, 249, 249, 0.3); /* subtle variation */
  --fluent-accent: #0067c0; /* Windows 11 blue accent */
  --fluent-accent-hover: #005a9e; /* darker accent for hover */
  --fluent-accent-light: rgba(0, 103, 192, 0.08); /* subtle accent tint */
  --fluent-text: #1f1f1f; /* primary text - soft black */
  --fluent-text-secondary: #605e5c; /* secondary text - warm gray */
  --fluent-text-tertiary: #8a8886; /* tertiary text - lighter gray */
  --fluent-border: rgba(230, 230, 230, 0.4); /* more translucent borders */
  --fluent-border-strong: rgba(209, 209, 209, 0.6); /* stronger borders */
  --fluent-divider: rgba(
    220,
    220,
    220,
    0.35
  ); /* more translucent divider lines */

  /* Windows 11 Light Gradients - Subtle, sophisticated */
  --gradient-primary-start: #0078d4; /* MS blue */
  --gradient-primary-end: #106ebe; /* deeper blue */
  --gradient-cta-start: #0086f0; /* vibrant blue */
  --gradient-cta-mid: #1490df; /* cyan blue */
  --gradient-cta-end: #00b7c3; /* aqua */
  --gradient-feature-1-start: #0078d4; /* blue */
  --gradient-feature-1-end: #00bcf2; /* cyan */
  --gradient-feature-2-start: #00cc6a; /* green */
  --gradient-feature-2-end: #10893e; /* forest green */
  --gradient-feature-3-start: #ffb900; /* gold */
  --gradient-feature-3-end: #ff8c00; /* orange */

  /* Shadows - layered depth */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 8px 16px 0 rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 8px 16px 0 rgba(0, 0, 0, 0.14),
    0 12px 24px 0 rgba(0, 0, 0, 0.08);
}

.dark {
  /* Windows 11 Dark Theme - Rich, deep, contrasty */
  --fluent-bg: #202020; /* dark neutral background */
  --fluent-surface: #2c2c2c; /* elevated surfaces */
  --fluent-surface-secondary: #282828; /* subtle variation */
  --fluent-accent: #60cdff; /* Windows 11 cyan accent */
  --fluent-accent-hover: #4db8e8; /* darker accent for hover */
  --fluent-accent-light: rgba(96, 205, 255, 0.15); /* subtle accent tint */
  --fluent-text: #fafafa; /* primary text - almost white but not pure */
  --fluent-text-secondary: #c8c8c8; /* secondary text - light gray */
  --fluent-text-tertiary: #9d9d9d; /* tertiary text - medium gray */
  --fluent-border: #3d3d3d; /* subtle borders */
  --fluent-border-strong: #505050; /* stronger borders */
  --fluent-divider: #3b3b3b; /* divider lines */

  /* Windows 11 Dark Gradients - Vibrant, energetic */
  --gradient-primary-start: #4cc2ff; /* bright cyan */
  --gradient-primary-end: #0078d4; /* MS blue */
  --gradient-cta-start: #60cdff; /* cyan */
  --gradient-cta-mid: #4db8e8; /* blue cyan */
  --gradient-cta-end: #3aa0d1; /* deep cyan */
  --gradient-feature-1-start: #60cdff; /* cyan */
  --gradient-feature-1-end: #00b7c3; /* aqua */
  --gradient-feature-2-start: #6bcf7f; /* bright green */
  --gradient-feature-2-end: #00cc6a; /* green */
  --gradient-feature-3-start: #ffd666; /* bright gold */
  --gradient-feature-3-end: #ffb900; /* gold */

  /* Shadows - stronger for dark mode */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 8px 16px 0 rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 8px 16px 0 rgba(0, 0, 0, 0.6), 0 12px 24px 0 rgba(0, 0, 0, 0.4);
}

/* Enhanced Glass / Acrylic effects - iOS inspired */
.acrylic {
  background: rgba(254, 254, 254, 0.2);
  backdrop-filter: blur(80px) saturate(200%) brightness(1.08);
  -webkit-backdrop-filter: blur(80px) saturate(200%) brightness(1.08);
  border: 1px solid rgba(250, 250, 250, 0.5);
  box-shadow: inset 0 1px 1px 0 rgba(254, 254, 254, 0.8),
    0 4px 12px 0 rgba(0, 0, 0, 0.08), 0 12px 32px 0 rgba(0, 0, 0, 0.06);
}

.dark .acrylic {
  background: rgba(44, 44, 44, 0.65);
  backdrop-filter: blur(80px) saturate(200%) brightness(0.95);
  -webkit-backdrop-filter: blur(80px) saturate(200%) brightness(0.95);
  border: 1px solid rgba(250, 250, 250, 0.1);
  box-shadow: inset 0 1px 1px 0 rgba(250, 250, 250, 0.05),
    0 2px 8px 0 rgba(0, 0, 0, 0.3), 0 8px 24px 0 rgba(0, 0, 0, 0.2);
}

.acrylic-strong {
  background: rgba(254, 254, 254, 0.35);
  backdrop-filter: blur(80px) saturate(200%) brightness(1.12);
  -webkit-backdrop-filter: blur(80px) saturate(200%) brightness(1.12);
  border: 1px solid rgba(250, 250, 250, 0.7);
  box-shadow: inset 0 1px 2px 0 rgba(254, 254, 254, 0.9),
    0 6px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 48px 0 rgba(0, 0, 0, 0.08);
}

.dark .acrylic-strong {
  background: rgba(44, 44, 44, 0.85);
  backdrop-filter: blur(80px) saturate(200%) brightness(0.92);
  -webkit-backdrop-filter: blur(80px) saturate(200%) brightness(0.92);
  border: 1px solid rgba(250, 250, 250, 0.15);
  box-shadow: inset 0 1px 2px 0 rgba(250, 250, 250, 0.08),
    0 4px 12px 0 rgba(0, 0, 0, 0.4);
}

/* Mica material - subtle background texture */
.mica {
  background-color: var(--fluent-surface);
  box-shadow: var(--shadow-sm);
}

.dark .mica {
  background-color: var(--fluent-surface);
}

/* Custom scrollbar */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(to right, rgb(37 99 235), rgb(147 51 234));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Animated gradient background */
@keyframes gradient-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

/* Slide down animation for mobile menu */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth transitions */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover glow effect - Fluent style with glass morphism */
.hover-glow {
  transition: all 0.3s cubic-bezier(0.33, 0, 0.67, 1);
}

.hover-glow:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px) scale(1.02);
  backdrop-filter: blur(25px) saturate(200%) brightness(1.1);
  -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(1.1);
}

.dark .hover-glow:hover {
  backdrop-filter: blur(25px) saturate(200%) brightness(1.15);
  -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(1.15);
}

/* Windows 11 reveal effect on hover - Enhanced for light mode */
.reveal-effect {
  position: relative;
  overflow: hidden;
}

.reveal-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(250, 250, 250, 0.15) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.reveal-effect:hover::before {
  opacity: 1;
}

.dark .reveal-effect::before {
  background: radial-gradient(
    circle at center,
    rgba(250, 250, 250, 0.1) 0%,
    transparent 70%
  );
}

body {
  background-color: var(--fluent-bg);
  color: var(--fluent-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Site navigation surface tuned to variables */
.site-nav {
  background-color: var(--fluent-surface);
  border-bottom: 1px solid var(--fluent-border);
  backdrop-filter: blur(10px);
}

/* Ensure links and headings inherit our text colors by default */
a,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
li {
  color: inherit;
}

/* Utility classes for using CSS variables with Tailwind where needed */
.text-fluent {
  color: var(--fluent-text) !important;
}
.text-fluent-secondary {
  color: var(--fluent-text-secondary) !important;
}
.bg-fluent-surface {
  background-color: var(--fluent-surface) !important;
}

/* Theme-aware gradient backgrounds */
.gradient-primary {
  background: linear-gradient(
    135deg,
    var(--gradient-primary-start),
    var(--gradient-primary-end)
  );
}

.gradient-cta {
  background: linear-gradient(
    135deg,
    var(--gradient-cta-start),
    var(--gradient-cta-mid),
    var(--gradient-cta-end)
  );
}

.gradient-feature-1 {
  background: linear-gradient(
    135deg,
    var(--gradient-feature-1-start),
    var(--gradient-feature-1-end)
  );
}

.gradient-feature-2 {
  background: linear-gradient(
    135deg,
    var(--gradient-feature-2-start),
    var(--gradient-feature-2-end)
  );
}

.gradient-feature-3 {
  background: linear-gradient(
    135deg,
    var(--gradient-feature-3-start),
    var(--gradient-feature-3-end)
  );
}