@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-sky-light: #E0F7FA;
  --color-sky-dark: #87CEEB;
  --color-steel-light: #B0C4DE;
  --color-steel-dark: #2F4F4F;
  --color-primary: #00BFFF;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--color-steel-dark);
  background-color: #F8FAFC;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

/* Premium Hero Widget */
.hero-widget {
  background: rgba(255, 255, 255, 0.85);
  /* Slightly more opaque for contrast */
  backdrop-filter: blur(20px);
  border: double 1px transparent;
  border-radius: 1rem;
  background-image: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    linear-gradient(to bottom right, #ffffff, var(--color-primary), var(--color-steel-dark));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.3),
    /* Deep shadow */
    0 0 15px rgba(0, 191, 255, 0.3);
  /* Subtle glow */
}

.hero-widget input {
  transition: all 0.3s ease;
}

.hero-widget input:focus {
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 191, 255, 0.1);
}


.steel-panel {
  background: linear-gradient(135deg, #e6e9f0 0%, #eef1f5 100%);
  border: 1px solid #d1d9e6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 6px rgba(0, 0, 0, 0.1);
}

.skyline-gradient {
  background: linear-gradient(to bottom, var(--color-sky-light), #FFFFFF);
}

.parallax-container {
  overflow: hidden;
  position: relative;
}

/* Custom Scrollbar for Chrome/Safari/Webkit */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--color-steel-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-steel-dark);
}