:root {
  /* Primary Colors */
  --color-sage-green: #7A9B8E;
  --color-warm-stone: #8B7E74;
  
  /* Neutrals */
  --color-soft-cream: #F5F3EF;
  --color-light-gray: #E8E6E1;
  --color-charcoal: #4A4A48;
  --color-medium-gray: #878580;
  
  /* Accent */
  --color-terracotta: #C77E68;
  
  /* Data Visualization */
  --color-dusty-blue: #8A9BA8;
  --color-muted-olive: #A8A070;
  --color-soft-clay: #B89485;
  
  /* Semantic Variables (optional - map to use cases) */
  --color-primary: var(--color-sage-green);
  --color-secondary: var(--color-warm-stone);
  --color-accent: var(--color-terracotta);
  --color-background: var(--color-soft-cream);
  --color-surface: var(--color-light-gray);
  --color-text-primary: var(--color-charcoal);
  --color-text-secondary: var(--color-medium-gray);

  /* Font Family */
  --font-family: 'Jost', sans-serif;
  --font-size: 16px;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Font Sizes */
  --font-size-small: 0.8rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.2rem;

  /* Line Heights */
  --line-height-small: 1.2;
  --line-height-medium: 1.4;
  --line-height-large: 1.6;
}

a.btn {
  display: flex;
  gap: 3px;
  align-items: center;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
  color: var(--color-soft-cream);

  &-accent {
    background: var(--color-accent);

    &:hover {
      background: var(--color-secondary);
    }
  }

  &-primary {
    background: var(--color-primary);

    &:hover {
      background: var(--color-secondary);
    }
  }

  &-soft-clay {
    background: var(--color-soft-clay);

    &:hover {
      background: var(--color-secondary);
    }
  }
}