*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --c-p-50:  #eff3ff; --c-p-100: #d6dffd; --c-p-200: #b5c2f7;
  --c-p-300: #8c9eea; --c-p-400: #6b7fd9; --c-p-500: #4b5fbf;
  --c-p-600: #3d4765; --c-p-700: #2f3854; --c-p-800: #232a42; --c-p-900: #161b2d;

  --c-white:     #ffffff;
  --c-gray-50:   #f8f7ff;
  --c-gray-100:  #f0eefc;
  --c-gray-200:  #e4e2f0;
  --c-gray-300:  #cbc9e0;
  --c-gray-400:  #9896b8;
  --c-gray-500:  #6b6994;
  --c-gray-600:  #4b4970;
  --c-gray-700:  #343258;
  --c-gray-800:  #1e1c3a;
  --c-gray-900:  #0d0c1f;

  --c-success: #16a24a;
  --c-warning: #f59e0b;
  --c-danger:  #b81c1c;
  --c-info:    #3b82f6;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.16), 0 8px 24px rgba(0,0,0,.08);

  --r-sm: 4px; --r: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 9999px;

  --t-fast:    120ms cubic-bezier(.4,0,.2,1);
  --t:         200ms cubic-bezier(.4,0,.2,1);
  --t-slow:    350ms cubic-bezier(.4,0,.2,1);
  --t-sidebar: 260ms cubic-bezier(.4,0,.2,1);

  /* layout globals (referenced by fixed elements outside #app) */
  --topbar-h: 56px;
}

html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--c-gray-900);
  background: var(--c-gray-50);
  line-height: 1.5;
}

a { color: var(--c-p-600); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; line-height: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
svg { display: block; flex-shrink: 0; }

:focus-visible { outline: 2px solid var(--c-p-600); outline-offset: 2px; border-radius: var(--r-sm); }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-gray-200); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-gray-300); }