@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300..900");

:root {
  --color-scheme: light;
  color-scheme: var(--color-scheme);

  --color-bg: hsl(40 33% 97%);
  --color-surface: hsl(0 0% 100%);
  --color-surface-raised: hsl(40 24% 93%);
  --color-text: hsl(222 30% 14%);
  --color-muted: hsl(220 10% 40%);
  --color-primary: hsl(172 82% 27%);
  --color-secondary: hsl(27 92% 38%);
  --color-title-start: hsl(172 82% 30%);
  --color-title-end: hsl(24 95% 42%);
  --color-action: var(--color-secondary);
  --color-on-primary: hsl(0 0% 100%);
  --color-on-action: hsl(0 0% 100%);
  --color-on-overlay: var(--color-text);
  --color-on-score: hsl(0 0% 100%);
  --color-border: hsl(220 20% 20% / 12%);
  --color-border-strong: hsl(220 20% 20% / 24%);
  --color-border-accent: hsl(172 82% 27% / 45%);
  --color-border-overlay: hsl(220 20% 20% / 45%);
  --color-danger: hsl(4 72% 35%);
  --color-danger-surface: hsl(4 75% 95%);
  --color-danger-border: hsl(4 60% 55% / 55%);
  --color-hero-shade-strong: hsl(40 33% 97% / 88%);
  --color-hero-shade-soft: hsl(40 33% 97% / 48%);
  --color-review-shade-strong: hsl(0 0% 100% / 96%);
  --color-review-shade-soft: hsl(0 0% 100% / 65%);
  --color-review-shade-end: hsl(0 0% 100% / 90%);
  --color-review-label: hsl(220 18% 28%);
  --color-score-preview: hsl(172 82% 27%);
  --color-score-90: hsl(180 69% 25%);
  --color-score-90-border: hsl(180 69% 31%);
  --color-score-80: hsl(180 69% 30%);
  --color-score-80-border: hsl(180 69% 31%);
  --color-score-60: hsl(178 52% 32%);
  --color-score-60-border: hsl(178 52% 33%);
  --color-score-40: hsl(37 95% 30%);
  --color-score-40-border: hsl(37 95% 31%);
  --color-score-20: hsl(27 91% 36%);
  --color-score-20-border: hsl(27 91% 37%);
  --color-score-0: hsl(27 91% 38%);
  --color-score-0-border: hsl(27 91% 39%);
  --image-checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3C/svg%3E");
  --image-backdrop-mask: linear-gradient(black, transparent);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --font-display: Inter, sans-serif;
  --font-body: Inter, sans-serif;

  --radius-default: 0.65rem;
  /*--radius-control: 0.35rem;*/
  --radius-control: var(--radius-default);
  --radius-pill: 999px;

  --shadow-color: 220 35% 15%;
  --shadow-sm: 0 0.125rem 0.375rem hsl(var(--shadow-color) / 10%);
  --shadow-md: 0 0.5rem 1.5rem hsl(var(--shadow-color) / 14%);
  --shadow-lg: 0 1.25rem 3rem hsl(var(--shadow-color) / 18%);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);

  --content-width: 95rem;

  font-family: var(--font-body);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--color-bg);
  scroll-behavior: smooth;
}

body {
  min-width: 18rem;
  min-height: 100vh;

  margin: 0;

  background: var(--color-bg);
  color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

form {
  padding: 0;
  margin: 0;
}

.wrapper {
  width: min(calc(100% - var(--space-8)), var(--content-width));
  margin-inline: auto;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-space, var(--space-4));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: var(--cluster-align, center);
  justify-content: var(--cluster-justify, flex-start);
  gap: var(--cluster-space, var(--space-4));
}

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;
  white-space: nowrap;

  border: 0;
  clip-path: inset(50%);
}

.text-display {
  font-family: var(--font-display);
}

.text-muted {
  color: var(--color-muted);
}

.flash-message {
  transition: opacity 200ms ease, transform 200ms ease;
}

.flash-message.is-dismissing {
  opacity: 0;
  transform: translateY(-0.25rem);
}