/* ==========================================================================
   CareMetrix — Design tokens
   Single source of truth for colour, radius, shadow, spacing and type.
   ========================================================================== */

:root {
  /* Brand */
  --brand-purple:   #7C3AED;
  --brand-violet:   #8B5CF6;
  --brand-indigo:   #6D3BE0;
  --brand-magenta:  #C026D3;
  --brand-pink:     #EC4899;
  --brand-pink-soft:#F472B6;
  --brand-orange:   #FB923C;

  --grad-brand:    linear-gradient(270deg, #ffb84d 0%, #f080c0 40%, #a57fcf 75%, #6f7fdf 100%);
  --grad-purple:   linear-gradient(135deg, #8B5CF6 0%, #6D3BE0 100%);
  --grad-pink:     linear-gradient(135deg, #F472B6 0%, #C026D3 100%);
  --grad-orange:   linear-gradient(135deg, #FDBA74 0%, #FB7185 100%);
  --grad-violet:   linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
  --brand-gradient: var(--grad-brand);   /* alias used across the product CSS */
  --white-rgb: 255, 255, 255;

  /* Sidebar */
  --sidebar-icon:     #FFFFFF;
  --sidebar-duration: .24s;
  --sidebar-ease:     cubic-bezier(.4, 0, .2, 1);
  --grad-sidebar:  linear-gradient(211deg, #d46ac2 7%, #b45cc8 27%, #8a4eb9 52%, #5e3f98 76%, #39256f 100%);
  --sidebar-gradient: var(--grad-sidebar);

  /* Surfaces */
  --bg:            #F5F4FA;
  --surface:       #FFFFFF;
  --surface-2:     #FAF9FE;
  --surface-alt:   #FAF9FE;
  --surface-3:     #F3F0FB;
  --border:        #EDEAF6;
  --border-strong: #E0DAF0;

  /* Text */
  --text:          #241C3C;
  --text-2:        #6B6482;
  --text-3:        #9C95AF;
  --text-on-brand: #FFFFFF;

  /* Status */
  --green:  #16A34A; --green-bg:  #DCFCE7; --green-dot:  #22C55E;
  --amber:  #B45309; --amber-bg:  #FEF3C7; --amber-dot:  #F59E0B;
  --red:    #DC2626; --red-bg:    #FEE2E2; --red-dot:    #EF4444;
  --blue:   #2563EB; --blue-bg:   #DBEAFE; --blue-dot:   #3B82F6;
  --violet: #7C3AED; --violet-bg: #EDE9FE; --violet-dot: #8B5CF6;
  --slate:  #475569; --slate-bg:  #F1F5F9;

  /* Forms */
  --form-text:       #241C3C;
  --form-bg:         #FAFAFE;
  --form-border:     #E7E1EB;
  --form-radius:     9px;
  --form-focus:      #8B5CF6;
  --form-focus-ring: #EFE4FF;
  --form-invalid:    #EF4444;
  --form-invalid-bg: #FFF7F7;

  /* Table (commonstyletabletwo) */
  --commontable2-min-width:   720px;
  --commontable2-header-bg:   #F5F1FA;
  --commontable2-cell-border: #E7E0F0;

  /* Radius */
  --r-btn: 12px;         /* buttons — matches the product design */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(36, 28, 60, .05);
  --shadow-sm: 0 2px 8px rgba(88, 62, 160, .06);
  --shadow-md: 0 8px 24px rgba(88, 62, 160, .08);
  --shadow-lg: 0 18px 48px rgba(88, 62, 160, .14);
  --shadow-brand: 0 10px 24px rgba(124, 58, 237, .28);
  --shadow-grad:  0 8px 20px -6px rgba(158, 92, 190, .48);

  /* Metrics */
  --header-h:   70px;
  --sidebar-w:  288px;
  --sidebar-w-collapsed: 88px;
  --gutter:     28px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
/* zero-specificity so the form layer in components.css can set size/colour */
:where(input, select, textarea) { font-family: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

/* Scrollbars */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #D9D3EA; border-radius: var(--r-pill); }
*::-webkit-scrollbar-thumb:hover { background: #C3BADD; }

/* Utilities */
.u-gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.u-flex     { display: flex; }
.u-between  { display: flex; align-items: center; justify-content: space-between; }
.u-center   { display: flex; align-items: center; }
.u-gap-4    { gap: 4px; }
.u-gap-8    { gap: 8px; }
.u-gap-12   { gap: 12px; }
.u-gap-16   { gap: 16px; }
.u-mt-8     { margin-top: 8px; }
.u-mt-16    { margin-top: 16px; }
.u-mt-24    { margin-top: 24px; }
.u-muted    { color: var(--text-2); }
.u-hidden   { display: none !important; }