/* Buvica Vunica — design tokens
   Palette anchored to the brand logo: cream, chocolate, rose, lilac. */

:root {
  /* Cream — page & surface warmth */
  --cream-50: #FFFDFA;
  --cream-100: #FAF5EE;
  --cream-200: #F3E9DD;
  --cream-300: #EADDCE;

  /* Chocolate — ink, headings, warm shadow tint */
  --brown-900: #3E2A1C;
  --brown-700: #6B4A32;
  --brown-500: #8A6248;
  --brown-300: #C9A98F;

  /* Rose — primary action / yarn */
  --rose-800: #96354A;
  --rose-700: #B84A5E;
  --rose-600: #C4556A;
  --rose-500: #D76A7E;
  --rose-300: #E8A0A8;
  --rose-100: #FBE4E2;

  /* Lilac & tan — accents */
  --lilac-500: #A98BC8;
  --lilac-300: #C5AEDE;
  --lilac-100: #EFE8F7;
  --tan-300: #E5B48C;

  /* Status */
  --ok-700: #2A7248;
  --ok-600: #2E7D4F;
  --ok-100: #E3F2E8;
  --danger-600: #C0392B;
  --danger-100: #FBE2DE;
  --warn-700: #92400E;
  --warn-100: #FDF0D5;
  --info-700: #1E40AF;
  --info-100: #DBEAFE;

  /* Semantic roles */
  --color-bg: var(--cream-100);
  --color-surface: #FFFFFF;
  --color-ink: var(--brown-900);
  --color-ink-soft: var(--brown-500);
  --color-heading: var(--brown-700);
  --color-primary: var(--rose-500);
  /* --color-primary-strong = white-text-safe fill for buttons/CTAs (AA) */
  --color-primary-strong: var(--rose-700);
  /* --color-primary-ink = rose text ON a rose-tinted fill (AA at 14px) */
  --color-primary-ink: var(--rose-800);
  --color-accent: var(--lilac-300);
  --color-border: var(--cream-300);

  /* Typography */
  --font-body: 'Josefin Sans', sans-serif;
  --font-display: 'Baloo 2', var(--font-body);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Shadows — always warm brown-tinted, never gray or violet */
  --shadow-sm: 0 2px 8px rgba(107, 74, 50, .10);
  --shadow-md: 0 8px 24px rgba(107, 74, 50, .14);
  --shadow-lg: 0 16px 40px rgba(107, 74, 50, .18);
  --shadow-btn: 0 6px 18px rgba(215, 106, 126, .35);

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}