:root {
  /* Colors - Palette */
  --sb-color-black: #000000;
  --sb-color-white: #ffffff;
  --sb-color-primary: #2f8cf9;
  /* palette-4 */
  --sb-color-dark-blue: #1f2c43;
  /* palette-5 */
  --sb-color-success: #1c906c;
  /* palette-6 */
  --sb-color-success-light: #0caf60;
  /* palette-7 */
  --sb-color-gray-dark: #262626;
  /* palette-8 */
  --sb-color-gray-darker: #101010;
  /* palette-9 */
  --sb-color-red: #c91d24;
  /* palette-10 */
  --sb-color-gray: #464646;
  /* palette-11 */

  /* Colors - Semantic */
  --sb-color-background: var(--sb-color-white);
  --sb-color-text: var(--sb-color-black);
  --sb-color-text-secondary: var(--sb-color-gray);
  --sb-color-border: #e5e7eb;
  /* Added manually for borders */

  /* Typography */
  --sb-font-primary: "Plus Jakarta Sans", sans-serif;
  --sb-font-size-base: 16px;
  --sb-line-height-base: 1.5;

  /* Spacing */
  --sb-spacing-1: 5px;
  --sb-spacing-2: 8px;
  --sb-spacing-3: 10px;
  --sb-spacing-4: 12px;
  --sb-spacing-5: 16px;
  --sb-spacing-6: 20px;
  --sb-spacing-7: 24px;
  --sb-spacing-8: 32px;
  --sb-spacing-9: 56px;
  --sb-spacing-10: 80px;
  --sb-spacing-11: 100px;
  --sb-spacing-12: 120px;

  /* Radius */
  --sb-radius-sm: 6px;
  --sb-radius-md: 10px;
  --sb-radius-lg: 12px;
  --sb-radius-full: 9999px;

  /* Shadows */
  --sb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --sb-shadow-DEFAULT: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --sb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --sb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Container */
  --sb-container-width: 1440px;
  --sb-container-padding: 20px;
}