/* ============================================================================
   React Spectrum (Spectrum 2) — Spacing, sizing, radius, borders, elevation
   Spacing scale is in px (matches S2 `padding` scale). Component control
   heights come straight from S2 controlSize(): XS 20 / S 24 / M 32 / L 40 / XL 48.
   ============================================================================ */

:root {
  /* ---- Spacing scale (px) ---- */
  --spacing-0:   0px;
  --spacing-50:  2px;
  --spacing-75:  4px;
  --spacing-100: 8px;
  --spacing-200: 12px;
  --spacing-300: 16px;
  --spacing-400: 24px;
  --spacing-500: 32px;
  --spacing-600: 40px;
  --spacing-700: 48px;
  --spacing-800: 64px;
  --spacing-900: 80px;
  --spacing-1000: 96px;

  /* ---- Corner radius ---- */
  --radius-none: 0px;
  --radius-sm:   4px;    /* corner-radius-small */
  --radius-md:   8px;    /* corner-radius-medium — default for cards/menus */
  --radius-lg:   10px;   /* corner-radius-large */
  --radius-xl:   16px;   /* corner-radius-extra-large */
  --radius-full: 9999px; /* pill / circle */

  /* ---- Border widths ---- */
  --border-width-100: 1px;
  --border-width-200: 2px;   /* default control border in S2 */
  --border-width-400: 4px;

  /* ---- Control heights (medium scale) ---- */
  --control-height-xs: 20px;
  --control-height-s:  24px;
  --control-height-m:  32px;   /* default */
  --control-height-l:  40px;
  --control-height-xl: 48px;

  /* ---- Selection control size (checkbox/radio/switch box) ---- */
  --control-box-s:  14px;
  --control-box-m:  16px;   /* default */
  --control-box-l:  18px;
  --control-box-xl: 20px;

  /* ---- Elevation (drop shadows) ---- */
  /* Emphasized: subtle lift for cards & buttons on hover */
  --shadow-emphasized:
    0px 1px 4px rgba(0,0,0,0.09);
  /* Elevated: popovers, menus, dialogs */
  --shadow-elevated:
    0px 4px 8px rgba(0,0,0,0.12),
    0px 0px 2px rgba(0,0,0,0.06);
  /* Dragged: item lifted by the pointer */
  --shadow-dragged:
    0px 8px 16px rgba(0,0,0,0.18),
    0px 1px 4px rgba(0,0,0,0.12);

  /* ---- Motion ---- */
  --ease-default: cubic-bezier(0.45, 0, 0.4, 1); /* @kind other */
  --ease-in:      cubic-bezier(0.5, 0, 1, 1);    /* @kind other */
  --ease-out:     cubic-bezier(0, 0, 0.40, 1);   /* @kind other */
  --duration-100: 130ms; /* @kind other */
  --duration-200: 160ms; /* @kind other */
  --duration-300: 190ms; /* @kind other */
  --animation-duration: 150ms; /* @kind other */
}

[data-theme="dark"] {
  /* Shadows are heavier in dark theme for the same perceived depth */
  --shadow-emphasized: 0px 1px 4px rgba(0,0,0,0.30);
  --shadow-elevated:
    0px 4px 8px rgba(0,0,0,0.45),
    0px 0px 2px rgba(0,0,0,0.25);
  --shadow-dragged:
    0px 8px 16px rgba(0,0,0,0.55),
    0px 1px 4px rgba(0,0,0,0.35);
}