/* Design tokens ported 1:1 from the Petxam Flutter design system
   (../petxam-app/lib/shared/themes/**). Keep values in sync with that
   source of truth rather than inventing new ones here. */
:root {
  /* Color — petx_colors_light.dart + petx_color_tokens.dart */
  --color-primary: #304bc0;
  --color-on-primary: #ffffff;
  --color-primary-container: #b5bee6;
  --color-on-primary-container: #121733;

  --color-secondary: #7d73c4;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #c2caea;
  --color-on-secondary-container: #201e34;

  --color-tertiary: #58930f;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #cae6a4;
  --color-on-tertiary-container: #1f3307;

  --color-surface: #f8fafc;
  --color-on-surface: #292a2b;
  --color-surface-container-highest: #eceff8;
  --color-on-surface-variant: #656774;

  --color-outline: #9c9eab;
  --color-outline-variant: #c7c6cc;

  --color-error: #da3848;
  --color-on-error: #ffffff;
  --color-info: #2979ff;
  --color-neutral: #9e9e9e;

  --color-white: #ffffff;

  /* Spacing — petx_spacing.dart (multiples of 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;

  /* Corner radius — petx_corner_radius.dart */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-lg-increased: 20px;
  --radius-xl: 28px;
  --radius-xl-increased: 32px;
  --radius-xxl: 48px;
  --radius-full: 999px;

  /* Breakpoints — petx_breakpoints.dart (referenced in CSS via media queries) */
  --breakpoint-sm: 600px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 960px;

  /* Typography — petx_text_styles.dart (Barlow for display/headline, Inter for the rest) */
  --font-display: "Barlow", sans-serif;
  --font-body: "Inter", sans-serif;

  --text-display-large: 700 44px/1.1 var(--font-display);
  --text-headline-bold: 700 32px/1.25 var(--font-display);
  --text-headline-large: 400 32px/1.25 var(--font-display);
  --text-headline-medium: 400 28px/1.286 var(--font-display);
  --text-headline-small: 400 24px/1.333 var(--font-display);
  --text-title-large-bold: 700 22px/1.273 var(--font-body);
  --text-title-large: 400 22px/1.273 var(--font-body);
  --text-title-medium: 500 16px/1.5 var(--font-body);
  --text-title-small: 500 14px/1.429 var(--font-body);
  --text-body-large: 400 16px/1.5 var(--font-body);
  --text-body-medium: 400 14px/1.429 var(--font-body);
  --text-body-small: 400 12px/1.333 var(--font-body);
  --text-label-large: 500 14px/1.429 var(--font-body);
  --text-label-medium: 600 12px/1.333 var(--font-body);

  /* Shadows (soft, matches the friendly/rounded look) */
  --shadow-sm: 0 1px 2px rgba(18, 23, 51, 0.06), 0 1px 3px rgba(18, 23, 51, 0.1);
  --shadow-md: 0 4px 10px rgba(18, 23, 51, 0.08), 0 2px 4px rgba(18, 23, 51, 0.06);
  --shadow-lg: 0 12px 28px rgba(18, 23, 51, 0.14);
}