:root {
    
    --text-xs:   12px;
    --text-sm:   14px;
    --text-base: 16px;
    --text-lg:   20px;
    --text-xl:   24px;
    --text-2xl:  32px;
    --text-3xl:  40px;
    
    --leading-tight:    1.2;
    --leading-snug:    1.35;
    --leading-normal:   1.5;
    --leading-relaxed: 1.65;
    
    --font-normal:  400;
    --font-medium:  500;
    --font-semibold: 600;
    --font-bold:    700;
    
    
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;
    --space-16: 64px;
    
    --header-height: 48px;
    --header-text-link: 18px;

    --page-header-padding: calc(var(--header-height) * 2);
    --page-section-padding: 128px;

    --reader-padding-bottom: 160px;

    --radius-sm:      4px;
    --radius-md:      8px;
    --radius-lg:     16px;
    --radius-full: 9999px;


    --error-height: 21px;
    
    --z-header: 100;
    --z-modal:  200;
    --z-toast:  300;

    --gray-100: #f5f5f5;
    --gray-200: #e8e8e8;
    --gray-300: #d4d4d4;
    --gray-400: #a8a8a8;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #3a3a3a;
    --gray-800: #313131;
    --gray-900: #272727;

    --color-white: hsl(310, 17%, 95%); /* page background */
    --color-black: #161612; /* default text color */ 

    --purple-600: hsl(278, 53%, 41%);;
    --purple-700: hsl(278, 71%, 25%);
    --purple-800: hsl(278, 71%, 18%);;

    --green-50:  #f0fdf4;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;

    --red-50:  #fff1f0;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;

    --blue-50:  #eff6ff;
    --blue-400: #4695f5;
    --blue-500: hsl(217, 85%, 54%);
    --blue-600: #235cd8;

    --orange-50:  #fff8ed;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;

    --color-error:              var(--red-500);
    --color-error-hover:        var(--red-400);
    --color-error-pressed:      var(--red-600);
    --color-error-surface:      var(--red-50);

    --color-success:        var(--green-500);

    --color-warning:        var(--orange-500);
    
    --color-info:           var(--blue-500);

    --color-border:        var(--gray-200);  /* default */
    --color-border-strong: var(--gray-300); /* emphasis, focused inputs */

    --color-card-bg:        white;
    --color-bg:             var(--color-white);
    --color-bg-subtle:      var(--gray-100);
    --color-border:         var(--gray-200);

    --color-bg-inverted:   var(--gray-900);
    --color-text-inverted: var(--gray-100);

    --color-text:               var(--color-black);
    --color-text-secondary:     var(--gray-500);
    --color-text-disabled:      var(--gray-400);
    --color-text-placeholder:   var(--gray-400);

    --color-link:           var(--blue-500);
    --color-link-hover:     var(--blue-400);
    --color-link-active:    var(--blue-600);

    --color-link-visited:   var(--purple-700);


}