/* ============================================================
   Dabuller — Radius, shadow, border tokens
   Industrial, slightly squared. Shadows are soft and cool-tinted,
   never heavy. Cards lean on borders + faint elevation.
   ============================================================ */

:root {
  /* Corner radii — utilitarian, not pill-soft */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;   /* default card / input */
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 999px;

  /* Borders */
  --border-width:        1px;
  --border-width-strong: 2px;

  /* Elevation — cool slate-tinted, layered subtly */
  --shadow-xs: 0 1px 2px rgba(20, 26, 32, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 26, 32, 0.08), 0 1px 2px rgba(20, 26, 32, 0.04);
  --shadow-md: 0 4px 10px rgba(20, 26, 32, 0.08), 0 2px 4px rgba(20, 26, 32, 0.04);
  --shadow-lg: 0 10px 24px rgba(20, 26, 32, 0.10), 0 4px 8px rgba(20, 26, 32, 0.05);
  --shadow-xl: 0 20px 48px rgba(20, 26, 32, 0.14), 0 8px 16px rgba(20, 26, 32, 0.06);

  /* Sheets / bottom-sheets rise from the bottom */
  --shadow-sheet: 0 -8px 28px rgba(20, 26, 32, 0.14);

  /* Brand-tinted lift for primary CTAs */
  --shadow-brand: 0 6px 18px color-mix(in srgb, var(--blue-500) 28%, transparent);
  --shadow-accent: 0 6px 18px color-mix(in srgb, var(--amber-500) 30%, transparent);
}