/* =============================================================================
   CSS Variables & Design System
   ============================================================================= */

:root {
  /* Colors - Pottery Studio Palette */
  --green: #70866C;
  --pottery: #e58a72;
  --ink: #0b1220;
  --muted: #667085;
  --line: #e7edf5;

  /* Backgrounds */
  --bg1: #fff8f1;
  --bg2: #fafcff;

  /* Effects */
  --shadow: 0 12px 36px rgba(16, 24, 40, .08);
  --radius: 18px;

  /* Spacing Scale (8px base) */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */

  /* Typography */
  --font-body: Manrope, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  --font-heading: "Baloo 2", system-ui, -apple-system, sans-serif;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* =============================================================================
   Base Styles
   ============================================================================= */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, #f3f6ff 0%, #fff0 60%),
    radial-gradient(900px 500px at 110% 10%, #eef4ee 0%, #fff0 60%),
    linear-gradient(180deg, var(--bg2), var(--bg1));
  margin: 0;
  line-height: 1.6;
}

/* Focus styles for accessibility */
*:focus-visible {
  outline: 2px solid var(--pottery);
  outline-offset: 2px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}