/* ==========================================================================
   Supreonix Medical — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow, motion.
   ========================================================================== */

:root {
  /* ---------- Brand / semantic colors ---------- */
  --c-primary:        #0b6bcb;
  --c-primary-600:    #0a5cae;
  --c-primary-700:    #084a8c;
  --c-primary-50:     #eef5fd;
  --c-primary-100:    #d8e8fa;
  --c-accent:         #0e9f8f;
  --c-accent-50:      #e7f7f4;

  --c-success:        #12805c;
  --c-success-bg:     #e6f5ef;
  --c-success-border: #b9e3d3;

  --c-warning:        #9a6400;
  --c-warning-bg:     #fdf3e2;
  --c-warning-border: #f0d9a8;

  --c-danger:         #b42318;
  --c-danger-bg:      #fdecea;
  --c-danger-border:  #f3c4bf;

  --c-info:           #0b6bcb;
  --c-info-bg:        #eef5fd;
  --c-info-border:    #c9dff6;

  --c-neutral:        #475467;
  --c-neutral-bg:     #f2f4f7;
  --c-neutral-border: #e0e3e9;

  /* ---------- Surfaces & text ---------- */
  --c-bg:             #f6f8fb;
  --c-surface:        #ffffff;
  --c-surface-2:      #fafbfc;
  --c-surface-sunken: #f1f4f8;
  --c-text:           #101828;
  --c-text-secondary: #475467;
  --c-text-muted:     #667085;
  --c-text-faint:     #98a2b3;
  --c-border:         #e4e7ec;
  --c-border-strong:  #d0d5dd;
  --c-overlay:        rgba(16, 24, 40, .48);

  /* ---------- Typography ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-base: 0.875rem;  /* 14 */
  --fs-md:   0.9375rem; /* 15 */
  --fs-lg:   1.0625rem; /* 17 */
  --fs-xl:   1.25rem;   /* 20 */
  --fs-2xl:  1.5rem;    /* 24 */
  --fs-3xl:  1.875rem;  /* 30 */
  --fs-4xl:  2.25rem;   /* 36 */
  --fs-5xl:  2.875rem;  /* 46 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.55;
  --lh-relaxed: 1.7;

  --ls-tight: -0.02em;
  --ls-wide:  0.02em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;

  /* ---------- Radius ---------- */
  --r-xs:   3px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   10px;
  --r-2xl:  12px;
  --r-full: 999px;

  /* ---------- Shadows (restrained: used to separate layers, not decorate) ---------- */
  --sh-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --sh-sm: 0 1px 3px rgba(16, 24, 40, .06);
  --sh-md: 0 2px 6px rgba(16, 24, 40, .07);
  --sh-lg: 0 8px 20px -6px rgba(16, 24, 40, .10);
  --sh-xl: 0 16px 40px -12px rgba(16, 24, 40, .14);

  --ring: 0 0 0 3px rgba(11, 107, 203, .18);
  --ring-danger: 0 0 0 3px rgba(180, 35, 24, .16);

  /* ---------- Layout ---------- */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --header-h: 60px;
  --content-max: 1280px;
  --bottomnav-h: 60px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;

  --z-sidebar: 60;
  --z-header: 50;
  --z-overlay: 90;
  --z-modal: 100;
  --z-toast: 120;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}