:root {
  /* Color variables */
  --gray: #e5eaf0;
  --badge-bg: #e6d6fc;
  --badge-text: #883ae1;
  --title: #20293a;
  --body-text: #6c727f;
  --quote-text: #6c757d;

  /* Spacing system */
  --space-xs: 0.4rem;
  --space-sm: 0.625rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.5rem;

  /* Typography */
  --font-family: "Sora", sans-serif;
  --font-size-xs: 0.625rem;
  --font-size-sm: 0.875rem;
  --font-size-md: clamp(0.8rem, 3vw, 1.125rem);
  --font-size-lg: clamp(1rem, 3.5vw, 1.125rem);

  /* Component sizes */
  --card-width: min(368px, 100%);
  --card-radius: clamp(16px, 5vw, 20px);
  --img-radius: clamp(28px, 6vw, 30px);
  --badge-radius: 50px;
  --shadow: 5px 5px 20px 5px rgba(17, 23, 41, 0.2);
}

/* Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--body-text);
  line-height: 1.5;
}

/* Layout container */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: var(--space-md);
}

/* Card component */
.card {
  width: var(--card-width);
  display: flex;
  flex-direction: column;
  border-radius: var(--card-radius);
  padding-bottom: clamp(20px, 4vw, 26px);
  box-shadow: var(--shadow);
}

/* Card image */
.card img {
  width: 100%;
  height: auto;
  border-radius: var(--img-radius);
  padding: var(--space-md);
  object-fit: cover;
}

/* Badge component */
.badge {
  background-color: var(--badge-bg);
  border-radius: var(--badge-radius);
  margin: 0 var(--space-md) var(--space-md);
  width: fit-content;
  padding: 0 var(--space-md);
}

.badge span {
  font-weight: 600;
  font-size: var(--font-size-xs);
  color: var(--badge-text);
  line-height: 1.5rem;
}

/* Typography styles */
h2 {
  color: var(--title);
  font-size: var(--font-size-lg);
  margin: 0 var(--space-md);
  line-height: 1.3;
}

blockquote {
  margin: var(--space-xs) var(--space-md) var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--quote-text);
  line-height: 1.3;
}

/* Divider */
hr {
  border: 0;
  border-top: 1px solid var(--gray);
  margin: var(--space-lg) 0;
}

/* Citation */
.cite {
  font-size: var(--font-size-xs);
  margin-left: var(--space-md);
}