/* Testslick Design System - CSS Custom Properties */
:root {
  /* Primary */
  --tss-color-primary-main: #4A398A;
  --tss-color-primary-pressed: #302361;
  --tss-color-primary-hover: #5668AC;
  --tss-color-primary-focus: #E7E3FC;
  --tss-color-primary-border: #B6ABED;
  --tss-color-secondary: #7B61FF;

  /* Backgrounds */
  --tss-color-third: #242347;
  --tss-color-forth: #171633;
  --tss-color-fifth: #060525;
  --tss-color-sixth: #313049;
  --tss-color-seventh: #3E3D5D;
  --tss-color-eighth: #383751;
  --tss-color-ninth: #5A5975;
  --tss-color-tenth: #45455C;
  --tss-color-twelfth: #6E6D7F;
  --tss-color-fake-fade: #313052;

  /* Status */
  --tss-color-success: #35B932;
  --tss-color-danger: #921919;
  --tss-color-warning: #EABB42;

  /* White variants */
  --tss-color-white: #FFFFFF;
  --tss-color-white-006: rgba(255, 255, 255, 0.06);
  --tss-color-white-015: rgba(255, 255, 255, 0.15);
  --tss-color-white-025: rgba(255, 255, 255, 0.25);
  --tss-color-white-030: rgba(255, 255, 255, 0.30);
  --tss-color-white-050: rgba(255, 255, 255, 0.50);
  --tss-color-white-060: rgba(255, 255, 255, 0.60);
  --tss-color-white-080: rgba(255, 255, 255, 0.80);

  /* Typography */
  --tss-font-family: 'Inter', sans-serif;
  --tss-font-xxs: 10px;
  --tss-font-xs: 11px;
  --tss-font-s: 12px;
  --tss-font-m: 14px;
  --tss-font-l: 16px;
  --tss-font-xl: 18px;
  --tss-font-xxl: 20px;

  /* Spacing */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 14px;
  --sp-7: 18px;
  --sp-8: 22px;
  --sp-9: 26px;
  --sp-10: 30px;
  --sp-11: 38px;
  --sp-12: 44px;

  /* Border radius */
  --radius-l: 10px;
  --radius-m: 8px;
  --radius-s: 6px;
  --radius-xs: 4px;

  /* Layout */
  --sidebar-width: 180px;
  --sidebar-collapsed: 60px;
  --header-height: 56px;
}