@layer reset, base, components, utilities;

:root {
  /* Colors */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #6b7280;
  --color-bg-primary: #ffffff;

  /* Typography */
  --font-family-base: system-ui, sans-serif;
  --font-size-base: 1rem;

  /* Spacing */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Layout */
  --max-width-content: 50rem;
}

@layer base {
  body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    max-width: var(--max-width-content);
    margin-inline: auto;
    padding-inline: var(--space-md);
    padding-block: var(--space-xl);
  }
}

@layer components {
  footer {
    margin-block-start: var(--space-xl);
    color: var(--color-text-secondary);
  }
}