All Tokens in Quanta CSS

--quanta-space-0: 0rem;
--quanta-space-1: 0.25rem;
--quanta-space-2: 0.5rem;
--quanta-space-3: 0.75rem;
--quanta-space-4: 1rem;
--quanta-space-5: 1.25rem;
--quanta-space-6: 1.5rem;
--quanta-space-8: 2rem;
--quanta-space-10: 2.5rem;

--quanta-rounded-sm: 0.125rem;
--quanta-rounded: 0.25rem;
--quanta-rounded-md: 0.375rem;
--quanta-rounded-lg: 0.5rem;
--quanta-rounded-xl: 0.75rem;
--quanta-rounded-2xl: 1rem;
--quanta-rounded-full: 9999px;

--quanta-font-inter: 'Inter', sans-serif;
--quanta-font-primary: 'Inter', sans-serif;
--quanta-font-secondary: 'Roboto', sans-serif;
--quanta-font-roboto-serif: 'Roboto Serif', serif;
--quanta-font-roboto-mono: 'Roboto Mono', monospace;

--quanta-screen-sm: 640px;
--quanta-screen-md: 768px;
--quanta-screen-lg: 1024px;
--quanta-screen-xl: 1280px;
--quanta-screen-2xl: 1536px;

--quanta-duration-fast: 150ms;
--quanta-duration-normal: 300ms;
--quanta-duration-slow: 500ms;
--quanta-ease-default: cubic-bezier(0.4, 0, 0.2, 1);

--quanta-z-xs: 10;
--quanta-z-sm: 100;
--quanta-z: 1000;
--quanta-z-lg: 10000;
--quanta-z-xl: 100000;

--quanta-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
--quanta-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
--quanta-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--quanta-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--quanta-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--quanta-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.1);

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

--quanta-border-width: 1px;
--quanta-ring-width: 2px;
--quanta-heading-size: var(--quanta-text-xl);
--quanta-subheading-size: var(--quanta-text-xl);
--quanta-body-size: var(--quanta-text-base);
--quanta-caption-size: var(--quanta-text-sm);

--quanta-bg-default: var(--quanta-grey-50);
--quanta-bg-secondary:      var(--quanta-slate-800);
--quanta-text-secondary:    var(--white);
--quanta-border-secondary:  var(--quanta-slate-800);
--quanta-secondary-hover:   var(--quanta-slate-700);

--quanta-bg-success:        var(--quanta-green-500);
--quanta-text-success:      var(--white);
--quanta-border-success:    var(--quanta-green-500);
--quanta-success-hover:     var(--quanta-green-600);

--quanta-bg-warning:        var(--quanta-orange-500);
--quanta-text-warning:      var(--white);
--quanta-border-warning:    var(--quanta-orange-500);
--quanta-warning-hover:     var(--quanta-orange-600);

--quanta-bg-danger:         var(--quanta-red-500);
--quanta-text-danger:       var(--white);
--quanta-border-danger:     var(--quanta-red-500);
--quanta-danger-hover:      var(--quanta-red-600);

--quanta-bg-info:           var(--quanta-cyan-500);
--quanta-text-info:         var(--white);
--quanta-border-info:       var(--quanta-cyan-500);
--quanta-info-hover:        var(--quanta-cyan-600);

--quanta-bg-neutral:        var(--quanta-grey-100);
--quanta-text-neutral:      var(--quanta-grey-700);
--quanta-border-neutral:    var(--quanta-grey-300);
--quanta-neutral-hover:     var(--quanta-grey-200);

--quanta-bg-accent:         var(--quanta-indigo-500);
--quanta-text-accent:       var(--white);
--quanta-border-accent:     var(--quanta-indigo-500);
--quanta-accent-hover:      var(--quanta-indigo-600);

--quanta-bg-ghost:          transparent;
--quanta-text-ghost:        var(--quanta-grey-600);
--quanta-border-ghost:      transparent;
--quanta-ghost-hover:       var(--quanta-grey-100);

--quanta-text-link:         var(--quanta-blue-600);
--quanta-link-hover:        var(--quanta-blue-700);

html[data-theme="dark"] {
  --quanta-bg-default:        var(--quanta-slate-900);
  --quanta-text-default:      var(--quanta-grey-100);
  --quanta-border-color:      var(--quanta-slate-700);

  --quanta-primary:         #25C0D6;
  --quanta-primary-hover:   #34D0E5;
  --quanta-text-primary:    #ffffff;
  --quanta-border-primary:  #34D0E5;

  --quanta-bg-secondary:      var(--quanta-slate-500);
  --quanta-text-secondary:    var(--quanta-slate-100);
  --quanta-border-secondary:  var(--quanta-slate-500);
  --quanta-secondary-hover:   var(--quanta-slate-400);

  --quanta-bg-success:        var(--quanta-green-400);
  --quanta-text-success:      var(--quanta-grey-100);
  --quanta-border-success:    var(--quanta-green-400);
  --quanta-success-hover:     var(--quanta-green-300);

  --quanta-bg-warning:        var(--quanta-orange-400);
  --quanta-text-warning:      var(--white);
  --quanta-border-warning:    var(--quanta-orange-400);
  --quanta-warning-hover:     var(--quanta-orange-300);

  --quanta-bg-danger:         var(--quanta-red-400);
  --quanta-text-danger:       var(--white);
  --quanta-border-danger:     var(--quanta-red-400);
  --quanta-danger-hover:      var(--quanta-red-700);

  --quanta-bg-info:           var(--quanta-cyan-300);
  --quanta-text-info:         var(--quanta-grey-100);
  --quanta-border-info:       var(--quanta-cyan-300);
  --quanta-info-hover:        var(--quanta-cyan-200);

  --quanta-bg-neutral:        var(--quanta-grey-400);
  --quanta-text-neutral:      var(--quanta-grey-200);
  --quanta-border-neutral:    var(--quanta-grey-400);
  --quanta-neutral-hover:     var(--quanta-grey-200);

  --quanta-bg-accent:         var(--quanta-indigo-400);
  --quanta-text-accent:       var(--quanta-grey-100);
  --quanta-border-accent:     var(--quanta-indigo-400);
  --quanta-accent-hover:      var(--quanta-indigo-500);

  --quanta-bg-ghost:          transparent;
  --quanta-text-ghost:        var(--quanta-grey-300);
  --quanta-border-ghost:      transparent;
  --quanta-ghost-hover:       var(--quanta-grey-800);

  --quanta-text-link:         var(--quanta-blue-400);
  --quanta-link-hover:        var(--quanta-blue-300);
}