/* ShadowPOS — Spacing, radius, shadow & motion tokens
   Mirrors Mantine v7 spacing / radius / shadow scales used across apps/web-app. */

:root {
  /* ---- Spacing (Mantine spacing) ---- */
  --space-xs: 0.625rem;  /* 10px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px — default gap/padding */
  --space-lg: 1.25rem;   /* 20px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */

  /* ---- Radius (Mantine radius; default UI radius = sm) ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;      /* inputs, buttons, nav links, badges */
  --radius-md: 8px;      /* cards / Paper radius="md" */
  --radius-lg: 16px;
  --radius-xl: 32px;     /* pills */
  --radius-round: 9999px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border: 1px solid var(--color-border);
  --border-subtle: 1px solid var(--color-border-subtle);

  /* ---- Shadows (Mantine shadows; tuned for dark surfaces) ---- */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 10px 15px -5px rgba(0, 0, 0, 0.35), 0 7px 7px -5px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.3), 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.35), 0 28px 23px -7px rgba(0, 0, 0, 0.45), 0 12px 12px -7px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 1px 3px rgba(0, 0, 0, 0.4), 0 36px 28px -7px rgba(0, 0, 0, 0.5), 0 17px 17px -7px rgba(0, 0, 0, 0.35);
  --shadow-logo: 8px 8px 6px rgba(0, 0, 0, 0.45); /* the long-shadow on the Shadow "S" mark */

  /* ---- Layout constants (from the live app) ---- */
  --layout-header-h: 80px;
  --layout-sidebar-w: 280px;
  --layout-aside-w: 400px;     /* POS cart aside */
  --layout-content-max: 1200px;

  /* ---- Motion ---- */
  --ease-standard: ease;      /* @kind other */
  --dur-fast: 0.15s;          /* @kind other */
  --dur-base: 0.2s;           /* @kind other */ /* hover/background transitions in the app */
  --dur-slow: 0.3s;           /* @kind other */ /* drawer slide */
  --transition-bg: background-color var(--dur-base) var(--ease-standard);
  --transition-colors: color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}