/* ===========================================================================
   Baltic Dental — Shape, spacing, elevation, layering
   =========================================================================== */

:root {
  /* --- Radii --- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;   /* buttons */
  --r-lg:   16px;   /* cards */
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;  /* pills */

  /* --- Spacing (4px scale) --- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* --- Control / row sizing (density-aware) --- */
  --ctrl-h: 44px;
  --row-h:  52px;
  --cell-x: 16px;
  --stack:  16px;

  /* --- Elevation ladder --- */
  --shadow-1: 0 1px 2px rgba(17,17,17,.06), 0 1px 1px rgba(17,17,17,.04);
  --shadow-2: 0 2px 6px rgba(17,17,17,.07), 0 1px 2px rgba(17,17,17,.05);
  --shadow-3: 0 8px 24px rgba(17,17,17,.10), 0 2px 6px rgba(17,17,17,.06);
  --shadow-4: 0 18px 48px rgba(17,17,17,.16), 0 6px 16px rgba(17,17,17,.08);

  /* --- Brand elevation / focus glow --- */
  --shadow-mint:     0 6px 20px color-mix(in srgb, var(--bd-mint) 32%, transparent);
  --shadow-cyan-glow: 0 0 0 4px color-mix(in srgb, var(--bd-mint) 35%, transparent);  /* focus ring */
  --shadow-cyan-soft: 0 4px 16px color-mix(in srgb, var(--bd-mint) 22%, transparent);
  --glow-mint-lg:    0 12px 40px color-mix(in srgb, var(--bd-mint) 40%, transparent);
  --shadow-blue-soft: 0 4px 16px color-mix(in srgb, var(--bd-blue) 20%, transparent);

  /* --- Z-index (tokens only) --- */
  --z-dropdown: 1000;  /* @kind other */
  --z-sticky:   1020;  /* @kind other */
  --z-tooltip:  1100;  /* @kind other */
  --z-drawer:   1200;  /* @kind other */
  --z-modal:    1300;  /* @kind other */
  --z-toast:    1400;  /* @kind other */

  /* --- Breakpoints (reference values) --- */
  --bp-sm:   640px;  /* @kind other */
  --bp-md:   768px;  /* @kind other */
  --bp-lg:   1024px;  /* @kind other */
  --bp-xl:   1280px;  /* @kind other */
  --bp-2xl:  1536px;  /* @kind other */
}

/* --- Compact density: controls/rows shrink, type untouched --- */
:root[data-density="compact"] {
  --ctrl-h: 36px;
  --row-h:  42px;
  --cell-x: 12px;
  --stack:  12px;
}