/* ============================================================
   Fluent / Windows — Spacing, radius, elevation
   4px base grid. Corner radii and elevation match WinUI.
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-12: 64px;

  /* Corner radii (WinUI) */
  --radius-control: 4px;   /* buttons, inputs */
  --radius-overlay: 8px;   /* cards, flyouts, menus */
  --radius-dialog: 8px;
  --radius-circle: 9999px;

  /* Control sizing */
  --control-height: 32px;       /* standard button / input height */
  --control-height-sm: 24px;    /* compact */
  --control-min-width: 96px;    /* min button width */
  --icon-size: 16px;

  /* Border widths */
  --stroke-width: 1px;
  --focus-stroke-width: 2px;

  /* ---- Elevation / shadows (Fluent) ---- */
  /* Resting card / control bottom-edge highlight is done per-component;
     these are the named overlay shadows. */
  --shadow-flyout:
    0 8px 16px rgba(0, 0, 0, 0.14),
    0 0 1px rgba(0, 0, 0, 0.12);
  --shadow-dialog:
    0 32px 64px rgba(0, 0, 0, 0.1876),
    0 2px 21px rgba(0, 0, 0, 0.1474);
  --shadow-tooltip:
    0 4px 8px rgba(0, 0, 0, 0.14),
    0 0 2px rgba(0, 0, 0, 0.12);
  --shadow-card:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 0 2px rgba(0, 0, 0, 0.06);

  /* Motion (Fluent uses fast, decelerating easing) */
  --motion-fast: 83ms;          /* @kind other */
  --motion-normal: 167ms;       /* @kind other */
  --motion-slow: 333ms;         /* @kind other */
  --motion-ease: cubic-bezier(0, 0, 0, 1);          /* @kind other */ /* decelerate */
  --motion-ease-standard: cubic-bezier(0.33, 0, 0.67, 1); /* @kind other */
}