/* MartinsConnect Design System — Non-color, non-type tokens */
/* Spacing, radii, shadows, motion, z-index, layout */

:root {
  /* =========================================================
     SPACING — 0.25rem base; half-steps for fine UI density
     ========================================================= */
  --space-0:   0;
  --space-0-5: 0.125rem;  /* 2 */
  --space-1:   0.25rem;   /* 4 */
  --space-1-5: 0.375rem;  /* 6 */
  --space-2:   0.5rem;    /* 8 */
  --space-2-5: 0.625rem;  /* 10 */
  --space-3:   0.75rem;   /* 12 */
  --space-3-5: 0.875rem;  /* 14 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-7:   1.75rem;   /* 28 */
  --space-8:   2rem;      /* 32 */
  --space-9:   2.25rem;   /* 36 */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 */
  --space-14:  3.5rem;    /* 56 */
  --space-16:  4rem;      /* 64 */
  --space-20:  5rem;      /* 80 */
  --space-24:  6rem;      /* 96 */

  /* =========================================================
     LAYOUT
     ========================================================= */
  --navbar-height: 52px;
  --sidebar-width: 240px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* =========================================================
     RADII — refined, approachable
     ========================================================= */
  --radius-sm:  4px;   /* inline chips, code tags */
  --radius-md:  6px;   /* small controls, badges */
  --radius-lg:  8px;   /* inputs, buttons */
  --radius-xl:  12px;  /* cards, modals */
  --radius-2xl: 16px;  /* large feature cards */
  --radius-full: 9999px;

  --border-width: 1px;
  --border-width-2: 2px;

  /* =========================================================
     SHADOWS — soft, layered, realistic (light mode)
     ========================================================= */
  --shadow-xs:   0 1px 2px rgba(15,23,42,0.05);
  --shadow-sm:   0 1px 3px rgba(15,23,42,0.10), 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md:   0 4px 6px -1px rgba(15,23,42,0.10), 0 2px 4px -1px rgba(15,23,42,0.06);
  --shadow-lg:   0 10px 15px -3px rgba(15,23,42,0.10), 0 4px 6px -2px rgba(15,23,42,0.05);
  --shadow-xl:   0 20px 25px -5px rgba(15,23,42,0.10), 0 10px 10px -5px rgba(15,23,42,0.04);
  --shadow-2xl:  0 25px 50px -12px rgba(15,23,42,0.25);
  --shadow-inner: inset 0 2px 4px rgba(15,23,42,0.06);

  /* Focus-ring glow tints (navy on light, gold on dark) */
  --ring-glow-light: rgba(0,53,102,0.10);
  --ring-glow-dark:  rgba(245,204,0,0.15);

  /* Focus ring — navy passes WCAG AA on light backgrounds */
  --ring-width:  2px;
  --ring-offset: 2px;
  --ring-color:  var(--navy-700);

  /* =========================================================
     MOTION
     ========================================================= */
  --duration-75:  75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;

  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  /* premium exponential curves */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

  /* =========================================================
     Z-INDEX
     ========================================================= */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-fixed: 150;
  --z-modal-backdrop: 200;
  --z-modal: 250;
  --z-popover: 300;
  --z-tooltip: 400;
  --z-toast: 500;

  /* =========================================================
     SKELETON / LOADING STATES
     ========================================================= */
  --color-skeleton:        var(--slate-200);
  --color-skeleton-strong: var(--slate-300);
}

[data-theme="dark"] {
  /* Dark-mode shadows are deeper to read against dark surfaces */
  --shadow-sm:  0 1px 3px rgba(15,23,42,0.30), 0 1px 2px rgba(15,23,42,0.20);
  --shadow-md:  0 4px 6px -1px rgba(15,23,42,0.30), 0 2px 4px -1px rgba(15,23,42,0.20);
  --shadow-lg:  0 10px 15px -3px rgba(15,23,42,0.30), 0 4px 6px -2px rgba(15,23,42,0.20);
  --shadow-xl:  0 20px 25px -5px rgba(15,23,42,0.40), 0 10px 10px -5px rgba(15,23,42,0.20);

  --ring-color: var(--gold-400);  /* gold passes WCAG AA on dark */

  --color-skeleton:        var(--slate-800);
  --color-skeleton-strong: var(--slate-700);
}