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

:root {
  color-scheme: light;
}

body {
  @apply bg-sand text-ink font-body;
}

* {
  box-sizing: border-box;
}

.glass-panel {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-shadow {
  box-shadow: 0 24px 60px rgba(18, 19, 22, 0.2);
}

.download-meter {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.14rem;
  border: 1.5px solid rgba(18, 19, 22, 0.7);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.95);
  padding: 0.2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.download-meter__segment {
  height: 0.5rem;
  border-radius: 0.14rem;
  background: rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.download-meter__segment--filled {
  background: linear-gradient(180deg, #b9f33d 0%, #7de11f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(115, 193, 35, 0.18);
}