/* Radii, elevation and hairlines. The site prefers layered shadows over solid
   borders for depth; --radius is the shadcn base and derived md/sm are smaller. */
:root {
  --radius: 0.375rem;                    /* 6px — buttons, inputs */
  --radius-sm: calc(var(--radius) - 4px); /* 2px */
  --radius-md: calc(var(--radius) - 2px); /* 4px */
  --radius-lg: var(--radius);            /* 6px */
  --radius-xl: 0.75rem;                  /* 12px — cards (rounded-xl) */
  --radius-2xl: 1rem;                    /* 16px — login card */
  --radius-window: 0.5rem;               /* 8px — WindowMock frame */
  --radius-pill: 9999px;                 /* badges, icon tiles (circle) */

  --shadow-xs: 0 1px 2px -1px hsl(220 15% 10% / 0.06);
  --shadow-sm: 0 1px 2px -1px hsl(220 15% 10% / 0.06), 0 2px 4px -2px hsl(220 15% 10% / 0.04);
  --shadow-md: 0 4px 8px -4px hsl(220 15% 10% / 0.08), 0 10px 20px -12px hsl(220 15% 10% / 0.08);
  --shadow-lg: 0 10px 24px -12px hsl(220 15% 10% / 0.12), 0 24px 48px -24px hsl(220 15% 10% / 0.12);
  --shadow-brand: 0 10px 30px -10px hsl(243 27% 51% / 0.3);
  --shadow-soft: 0 4px 20px -4px hsl(243 27% 51% / 0.1);

  --border-width: 1px; /* @kind spacing */
  --focus-ring-width: 2px; /* @kind spacing */
  --focus-ring-offset: 2px; /* @kind spacing */
}

.dark {
  --shadow-xs: 0 1px 2px -1px hsl(0 0% 0% / 0.4);
  --shadow-sm: 0 1px 2px -1px hsl(0 0% 0% / 0.4), 0 2px 4px -2px hsl(0 0% 0% / 0.3);
  --shadow-md: 0 4px 8px -4px hsl(0 0% 0% / 0.5), 0 10px 20px -12px hsl(0 0% 0% / 0.4);
  --shadow-lg: 0 10px 24px -12px hsl(0 0% 0% / 0.6), 0 24px 48px -24px hsl(0 0% 0% / 0.5);
  --shadow-brand: 0 10px 30px -10px hsl(243 40% 65% / 0.4);
  --shadow-soft: 0 4px 20px -4px hsl(243 40% 65% / 0.2);
}