/* Liquid Glass theme: translucent, blurred, rounded, tinted accents */

:root {
  /* Brand Colors */
  --accent: #4fd1c5;
  --accent-light: #7dd3f8;
  --accent-dark: #38b2ac;

  /* Glass Effect Properties */
  --glass-blur: 18px;
  --glass-opacity-light: 0.85;
  --glass-opacity-dark: 0.25;
  --glass-border-light: hsla(0, 0%, 100%, 0.8);
  --glass-border-dark: hsla(0, 0%, 100%, 0.08);
  --glass-shadow: 0 6px 30px rgba(0, 0, 0, 0.15),
    inset 0 1px rgba(255, 255, 255, 0.2);
  --glass-highlight-strength: 0.18;

  /* Spacing System */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Typography Scale */
  --text-xs: clamp(0.75rem, 0.8vw, 0.875rem);
  --text-sm: clamp(0.875rem, 1vw, 1rem);
  --text-base: clamp(1rem, 1.2vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.4vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 2vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 2.5vw, 2.25rem);
  --text-4xl: clamp(2.25rem, 3vw, 3rem);

  /* Animation Timing */
  --timing-fast: 0.15s;
  --timing-base: 0.25s;
  --timing-slow: 0.35s;
  --timing-slower: 0.5s;

  /* Animation Easings */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-modal: 1100;
  --z-overlay: 1200;
  --z-tooltip: 1300;

  /* Breakpoints (for reference in JS) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* Compute surface/border per theme */
body:not(.dark-mode) {
  /* Slightly richer liquid glass in light mode */
  --glass-surface: rgba(255, 255, 255, calc(var(--glass-opacity-light) + 0.03));
  --glass-border: color-mix(
    in oklab,
    var(--glass-border-light) 85%,
    #e6f7f4 15%
  );
}
body.dark-mode {
  --glass-surface: rgba(
    15,
    23,
    42,
    var(--glass-opacity-dark)
  ); /* slate-900-ish */
  --glass-border: var(--glass-border-dark);
}

/* Generic glass surface */
.glass {
  position: relative;
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
}

/* Subtle top reflection */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.08) 12%,
    rgba(255, 255, 255, 0.02) 35%,
    transparent 55%
  );
}

/* Interactive light hotspot following cursor */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    450px circle at var(--mx, 50%) var(--my, 20%),
    rgba(255, 255, 255, var(--glass-highlight-strength)),
    transparent 40%
  );
  mix-blend-mode: soft-light;
}

/* Nav bar: apply glass only if explicitly opted-in with .glass */
.nav-bar.glass {
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Make hamburger/toggle sit nicely inside the glass bar */
.hamburger svg,
.toggle {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.08));
}

/* Removed side-panel container glass; pills are styled in nav-bar.css */
/* (Intentionally empty here to avoid background/blur behind pills) */

/* Intro content: no glass by default (keeps original clean look) */

/* CTA tint and rounded pill */
.intro-cta {
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent) 60%, white 40%);
  color: color-mix(in oklab, var(--accent) 80%, black 20%);
  background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--accent) 16%, transparent),
      transparent
    ),
    transparent;
}
.intro-cta:hover {
  background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--accent) 22%, transparent),
      transparent
    ),
    color-mix(in oklab, var(--accent) 10%, transparent);
}

/* Typography: keep code look for effects, system-ui for general */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
#terminalText,
#scrambleText {
  /* Use modern heading font to match intro glassy style */
  font-family: var(--font-heading);
}

/* Utility Classes for Consistent Spacing and Styling */
.text-xs {
  font-size: var(--text-xs);
}
.text-sm {
  font-size: var(--text-sm);
}
.text-base {
  font-size: var(--text-base);
}
.text-lg {
  font-size: var(--text-lg);
}
.text-xl {
  font-size: var(--text-xl);
}
.text-2xl {
  font-size: var(--text-2xl);
}
.text-3xl {
  font-size: var(--text-3xl);
}
.text-4xl {
  font-size: var(--text-4xl);
}

.rounded-sm {
  border-radius: var(--radius-sm);
}
.rounded-md {
  border-radius: var(--radius-md);
}
.rounded-lg {
  border-radius: var(--radius-lg);
}
.rounded-xl {
  border-radius: var(--radius-xl);
}
.rounded-2xl {
  border-radius: var(--radius-2xl);
}
.rounded-full {
  border-radius: var(--radius-full);
}

.p-xs {
  padding: var(--space-xs);
}
.p-sm {
  padding: var(--space-sm);
}
.p-md {
  padding: var(--space-md);
}
.p-lg {
  padding: var(--space-lg);
}
.p-xl {
  padding: var(--space-xl);
}

.m-xs {
  margin: var(--space-xs);
}
.m-sm {
  margin: var(--space-sm);
}
.m-md {
  margin: var(--space-md);
}
.m-lg {
  margin: var(--space-lg);
}
.m-xl {
  margin: var(--space-xl);
}

.transition-fast {
  transition-duration: var(--timing-fast);
}
.transition-base {
  transition-duration: var(--timing-base);
}
.transition-slow {
  transition-duration: var(--timing-slow);
}

.ease-in {
  transition-timing-function: var(--ease-in);
}
.ease-out {
  transition-timing-function: var(--ease-out);
}
.ease-in-out {
  transition-timing-function: var(--ease-in-out);
}
.ease-back {
  transition-timing-function: var(--ease-back);
}

@media (prefers-reduced-motion: reduce) {
  .glass::after {
    display: none;
  }
}