tokens.css

/* Tokens */
.ds-widgets {
  @import 'tailwindcss/base';
  @import 'tailwindcss/components';
  @import 'tailwindcss/utilities';

  font-size: 1.6rem;

  /* Colors */
  --color-body: #fff;
  --color-on-body: #222;

  --color-surface: #e6e6e6;
  --color-on-surface: #222;

  --color-primary: #222;
  --color-on-primary: #fff;

  --color-secondary: #ff0000;
  --color-on-secondary: #fff;

  --color-gray-1: #f3f4f6;
  --color-gray-2: #e5e7eb;
  --color-gray-3: #d1d5db;
  --color-gray-4: #9ca3af;
  --color-gray-5: #6b7280;
  --color-gray-6: #4b5563;
  --color-gray-7: #374151;
  --color-gray-8: #1f2937;
  --color-gray-9: #111827;

  /* Spacing: gaps, margin, padding, etc. */
  --spacing-xxs: 0.15625em;
  --spacing-xs: 0.3125em;
  --spacing-sm: 0.625em;
  --spacing-md: 1.25em;
  --spacing-lg: 2.5em;
  --spacing-xl: 3.75em;
  --spacing-2xl: 4.25em;
  --spacing-3xl: 4.75em;

  /* Font Families */
  --font-body: sans-serif;

  /* Font Sizes */
  --font-xs: 0.75em;
  --font-sm: 0.875em;
  --font-md: 1em;
  --font-lg: 1.125em;
  --font-xl: 1.25em;
  --font-2xl: 1.5em;
  --font-3xl: 1.875em;
  --font-4xl: 2.25em;
  --font-5xl: 3em;

  /* Font Weights */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  --leading-3: '.75em';
  --leading-4: '1em';
  --leading-5: '1.25em';
  --leading-6: '1.5em';
  --leading-7: '1.75em';
  --leading-8: '2em';
  --leading-9: '2.25em';
  --leading-10: '2.5em';
}

.ds-widgets input[type='checkbox'] {
  font-size: 80%;
  margin: 0;
  top: 0;
}

.block-display {
  display: block;
}

.loading-spinner-on-mobile {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}