/* ===========================================================================
   TeamReach — Spacing, radii, shadows, motion
   Mirrors apps/mobile/src/lib/theme.ts (spacing / radii / shadows / animation).
   =========================================================================== */

:root {
  /* Spacing scale (dp) */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-huge: 48px;

  /* Border radii */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-btn: 10px;   /* Button.tsx base radius */
  --radius-lg: 12px;    /* Card.tsx radius */
  --radius-xl: 15px;
  --radius-2xl: 20px;
  --radius-pill: 30px;
  --radius-full: 9999px;

  /* Shadows (translated from RN shadow props) */
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.08);   /* Card.tsx iOS shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.20);
  /* Marketing elevation */
  --shadow-float: 0 12px 32px rgba(0, 37, 61, 0.16);

  /* Header overlay (team wallpaper darkening + olive card) */
  --header-card-bg: rgba(75, 95, 70, 0.55);
  --header-card-border: rgba(200, 210, 190, 0.6);
  --scrim: rgba(0, 0, 0, 0.4);

  /* Motion */
  --dur-fast: 150ms; /* @kind other */
  --dur-normal: 250ms; /* @kind other */
  --dur-slow: 350ms; /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
}