/* ============================================================
   Animal-ID PWA redesign · DESIGN TOKENS
   Single source of truth for colours, typography, spacing,
   radii, motion and shadows. Every screen + component file
   loads this first.
   ============================================================ */

:root {
  /* — Brand greens — */
  --c-brand-green-700: #2F6537;
  --c-brand-green-600: #3F8347;
  --c-brand-green-500: #4E9D57;   /* primary brand */
  --c-brand-green-200: #BCDDC0;
  --c-brand-green-100: #E4F1E6;
  --c-brand-green-050: #F2F8F3;

  /* — Neutrals — */
  --c-brand-dark-900:  #1F2125;
  --c-brand-dark-800:  #2A2C30;   /* header bg */
  --c-brand-dark-700:  #353535;   /* primary text */
  --c-brand-dark-500:  #5C5C5C;
  --c-brand-dark-300:  #8A8A8A;   /* secondary text */
  --c-brand-dark-100:  #C9C9C9;
  --c-brand-dark-050:  #E5E5E5;   /* dividers */
  --c-brand-dark-025:  #F4F4F4;   /* surface tint */
  --c-brand-dark-015:  #FAFAFA;   /* page bg */

  /* — Accents — */
  --c-brand-yellow-600: #E69708;
  --c-brand-yellow-500: #F9B530;
  --c-brand-yellow-100: #FFEAC0;
  --c-status-danger-600: #B22D2D;
  --c-status-danger-500: #D93838;
  --c-status-danger-100: #FBE2E2;
  --c-status-info-600:  #1D4ED8;
  --c-status-info-500:  #3B82F6;
  --c-status-info-100:  #DBEAFE;
  --c-cream-100:        #F6EFE0;
  --c-white:            #FFFFFF;

  /* — Radii — */
  --r-xs: 4px;  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
  --r-pill: 999px;

  /* — Spacing scale (4px base) — */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* — Typography — */
  --font-sans: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-input: 'Roboto', system-ui, -apple-system, "Segoe UI", sans-serif;

  /* — Motion — */
  --ease-standard:    cubic-bezier(.2, 0, .2, 1);
  --ease-emphasis:    cubic-bezier(.32, .72, 0, 1);

  /* — Shadows (mobile-tuned: subtle, layered) — */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.12), 0 18px 40px rgba(0,0,0,0.10);

  /* — Layout — */
  --topbar-h:   56px;   /* sticky header height */
  --tabbar-h:   72px;   /* bottom tab bar height */
  --statusbar-h: 0px;   /* set non-zero only when faking iOS status bar */
  --safe-top:   50px;   /* notch / dynamic-island clearance — keep content below this */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.5;
  color: var(--c-brand-dark-700);
  background: var(--c-brand-dark-015);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }