CSS Design Token & Variable Generator

/* ── Generated by CSSAWWWARDS Design Token Generator ── */
:root {

  /* Colors — Primary */
  --color-primary-50: #f1fefa;
  --color-primary-100: #e3fcf4;
  --color-primary-200: #c4f8e7;
  --color-primary-300: #98f0d4;
  --color-primary-400: #61e5bb;
  --color-primary-500: #28d7a0;
  --color-primary-600: #20b183;
  --color-primary-700: #198a66;
  --color-primary-800: #126349;
  --color-primary-900: #0c4130;
  --color-primary-950: #082b20;

  /* Colors — Secondary */
  --color-secondary-50: #f0f0ff;
  --color-secondary-100: #e1e2fe;
  --color-secondary-200: #bfc0fd;
  --color-secondary-300: #9092f9;
  --color-secondary-400: #5457f3;
  --color-secondary-500: #151aea;
  --color-secondary-600: #1115c0;
  --color-secondary-700: #0d1096;
  --color-secondary-800: #0a0c6c;
  --color-secondary-900: #060846;
  --color-secondary-950: #04052f;

  /* Colors — Neutral */
  --color-neutral-50: #f6f7f9;
  --color-neutral-100: #eceff3;
  --color-neutral-200: #d8dce4;
  --color-neutral-300: #bcc1cd;
  --color-neutral-400: #98a0ae;
  --color-neutral-500: #747c8b;
  --color-neutral-600: #5f6572;
  --color-neutral-700: #4a4f59;
  --color-neutral-800: #353940;
  --color-neutral-900: #23252a;
  --color-neutral-950: #17191c;

  /* Colors — Danger */
  --color-danger-50: #fff0f0;
  --color-danger-100: #fee1e1;
  --color-danger-200: #fdbfbf;
  --color-danger-300: #f98f8f;
  --color-danger-400: #f35353;
  --color-danger-500: #eb1414;
  --color-danger-600: #c11010;
  --color-danger-700: #960d0d;
  --color-danger-800: #6c0909;
  --color-danger-900: #460606;
  --color-danger-950: #2f0404;

  /* Colors — Success */
  --color-success-50: #f0fffa;
  --color-success-100: #e1fef5;
  --color-success-200: #bffde8;
  --color-success-300: #90f9d6;
  --color-success-400: #53f3be;
  --color-success-500: #14eba4;
  --color-success-600: #11c086;
  --color-success-700: #0d9669;
  --color-success-800: #096c4b;
  --color-success-900: #064631;
  --color-success-950: #042f21;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;
  --space-64: 256px;

  /* Typography */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* Shadows */
  --shadow-sm: 0px 1px 2px 0px rgba(0,0,0,0.08);
  --shadow-md: 0px 4px 8px 0px rgba(0,0,0,0.10);
  --shadow-lg: 0px 10px 24px 0px rgba(0,0,0,0.12);
  --shadow-xl: 0px 20px 48px 0px rgba(0,0,0,0.14);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}