@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --background: 190 44% 92%;
  --foreground: 210 50% 10%;
  --primary: 205 85% 40%;
  --primary-foreground: 0 0% 100%;
  --secondary: 185 45% 92%;
  --secondary-foreground: 205 85% 30%;
  --muted: 210 30% 94%;
  --muted-foreground: 210 20% 45%;
  --accent: 160 60% 45%;
  --accent-foreground: 0 0% 100%;
  --border: 210 25% 88%;
  --ring: 205 85% 40%;
  --radius: 0.75rem;
  --dna-blue: 205 85% 50%;
  --dna-red: 355 75% 55%;
  --dna-green: 160 60% 45%;
  --dna-brown: 25 30% 45%;
  --gradient-ocean: linear-gradient(135deg, hsl(205 85% 45%) 0%, hsl(185 70% 50%) 100%);
  --gradient-dna: linear-gradient(90deg, hsl(205 85% 50%) 0%, hsl(160 60% 45%) 50%, hsl(355 75% 55%) 100%);
}

body {
  font-family: 'Inter', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  margin-top: 10px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  margin-top: 0px;
  margin-bottom: 15px;
  color: hsl(var(--foreground));
}


/* Glass morphism card */
.card-glass {
  padding: 2rem;
  margin-bottom: 40px;
  border-radius: 0.75rem;        /* rounded-xl */
  border: 1px solid hsl(210 20% 82% / 0.6);  /* border-border/60 */
  background: hsl(30 13% 100%);        /* card @ 70% opacity */
  color: hsl(211 20% 45%);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 4px 12px -2px hsl(210 50% 10% / 0.08),
              0 2px 6px -2px hsl(210 50% 10% / 0.06),
              inset 0 1px 0 hsl(0 0% 100% / 0.1);
}

/* Hover effect */
.card-hover {
  transition: all 300ms;
}

.card-hover:hover {
  box-shadow: 0 12px 24px -4px hsl(210 50% 10% / 0.12),
              0 4px 10px -4px hsl(210 50% 10% / 0.08);
  transform: translateY(-4px);
}

.input-panel {
  color: white;
  background: hsl(var(--dna-green));
}

.accent-line-blue {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, hsl(var(--dna-blue)), transparent);
}

.accent-line-red {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, hsl(var(--dna-red)), transparent);
}

.accent-line-green {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, hsl(var(--dna-green)), transparent);
}

.accent-line-brown {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, hsl(var(--dna-brown)), transparent);
}

.control-label {
  font-weight: 400;
  color: white;
}

.checkbox {
  font-weight: 400;
  color: white;
}

.irs--shiny .irs-from, .irs--shiny .irs-to, .irs--shiny .irs-single {
  background-color: #c6e3e3;
  color: hsl(var(--foreground));
}

.irs--shiny .irs-bar {
  background-color: hsl(var(--dna-red));
  border-color: hsl(var(--dna-red));
}

input[type="checkbox"]#example {
  accent-color: hsl(var(--dna-blue));
}

input[type="checkbox"]#settings {
  accent-color: hsl(var(--dna-red));
}

/* DNA red accent */
.border-l-dna-red { border-left-color: hsl(var(--dna-red)); }
.text-dna-red { color: hsl(var(--dna-red)); }


.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    95deg,
    transparent 25%,
    hsl(0 0% 100% / 0.15) 37%,
    transparent 50%
  );
  animation: shimmer-slide 10s ease-in-out infinite;
}

@keyframes shimmer-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}