@font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: normal;
      src: url("/assets/fonts/Lato-Regular.ttf") format("truetype");
    }
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: light;
      src: url("/assets/fonts/Lato-Light.ttf") format("truetype");
    }
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: bold;
      src: url("/assets/fonts/Lato-Bold.ttf") format("truetype");
    }
  

    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: normal;
      src: url("/assets/fonts/Lato-Regular.ttf") format("truetype");
    }
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: light;
      src: url("/assets/fonts/Lato-Light.ttf") format("truetype");
    }
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: bold;
      src: url("/assets/fonts/Lato-Bold.ttf") format("truetype");
    }
  
    :root {
      
    --color-bg-primary: var(--color-emerald-500);
    --color-bg-primary-hard: var(--color-emerald-700);
    --color-bg-primary-highlight: rgba(236, 253, 245, .3);
    --color-bg-secondary: var(--color-emerald-700);
    --color-bg-default: var(--color-white);
    --color-bg-inverse: var(--color-white);

    --color-text-primary: var(--color-emerald-500);
    --color-text-primary-hard: var(--color-emerald-700);
    --color-text-primary-highlight: rgba(236, 253, 245, .3);
    --color-text-secondary: var(--color-emerald-700);
    --color-text-default: var(--color-black);
    --color-text-default-soft: var(--color-neutral-600);
    --color-text-default-soft-900: var(--color-neutral-900);
    --color-text-default-soft-800: var(--color-neutral-800);
    --color-text-default-soft-700: var(--color-neutral-700);
    --color-text-default-soft-600: var(--color-neutral-600);
    --color-text-default-soft-500: var(--color-neutral-500);
    --color-text-default-soft-400: var(--color-neutral-400);
    --color-text-default-soft-300: var(--color-neutral-300);
    --color-text-default-soft-200: var(--color-neutral-200);
    --color-text-default-soft-100: var(--color-neutral-100);
    --color-text-default-soft-50: var(--color-neutral-50);
    --color-text-inverse: var(--color-white);
    --color-text-inverse-soft: var(--color-neutral-500);
  
      --font-body: 'Lato';
      --font-display: 'Lato';
    }
    .theme-default {
        
    --color-bg-primary: var(--color-emerald-500);
    --color-bg-primary-hard: var(--color-emerald-700);
    --color-bg-primary-highlight: rgba(236, 253, 245, .3);
    --color-bg-secondary: var(--color-emerald-700);
    --color-bg-default: var(--color-white);
    --color-bg-inverse: var(--color-white);

    --color-text-primary: var(--color-emerald-500);
    --color-text-primary-hard: var(--color-emerald-700);
    --color-text-primary-highlight: rgba(236, 253, 245, .3);
    --color-text-secondary: var(--color-emerald-700);
    --color-text-default: var(--color-black);
    --color-text-default-soft: var(--color-neutral-600);
    --color-text-default-soft-900: var(--color-neutral-900);
    --color-text-default-soft-800: var(--color-neutral-800);
    --color-text-default-soft-700: var(--color-neutral-700);
    --color-text-default-soft-600: var(--color-neutral-600);
    --color-text-default-soft-500: var(--color-neutral-500);
    --color-text-default-soft-400: var(--color-neutral-400);
    --color-text-default-soft-300: var(--color-neutral-300);
    --color-text-default-soft-200: var(--color-neutral-200);
    --color-text-default-soft-100: var(--color-neutral-100);
    --color-text-default-soft-50: var(--color-neutral-50);
    --color-text-inverse: var(--color-white);
    --color-text-inverse-soft: var(--color-neutral-500);
  
      }
.theme-dark {
        
    --color-bg-primary: var(--color-emerald-500);
    --color-bg-primary-hard: var(--color-emerald-700);
    --color-bg-secondary: var(--color-emerald-700);
    --color-bg-default: var(--color-neutral-800);
    --color-bg-inverse: var(--color-white);

    --color-text-primary: var(--color-emerald-500);
    --color-text-primary-hard: var(--color-emerald-700);
    --color-text-secondary: var(--color-emerald-700);
    --color-text-default: var(--color-white);
    --color-text-default-soft: var(--color-neutral-400);
    --color-text-default-soft-900: var(--color-neutral-50);
    --color-text-default-soft-800: var(--color-neutral-100);
    --color-text-default-soft-700: var(--color-neutral-200);
    --color-text-default-soft-600: var(--color-neutral-300);
    --color-text-default-soft-500: var(--color-neutral-400);
    --color-text-default-soft-400: var(--color-neutral-500);
    --color-text-default-soft-300: var(--color-neutral-600);
    --color-text-default-soft-200: var(--color-neutral-700);
    --color-text-default-soft-100: var(--color-neutral-800);
    --color-text-default-soft-50: var(--color-neutral-900);
    --color-text-inverse: var(--color-neutral-900);
    --color-text-inverse-soft: var(--color-neutral-500);
  
      }
.theme-slate {
        
  --color-bg-primary: var(--color-slate-500);
  --color-bg-primary-hard: var(--color-slate-700);
  --color-bg-secondary: var(--color-slate-700);
  --color-bg-default: var(--color-slate-50);
  --color-bg-inverse: var(--color-slate-50);

  --color-text-primary: var(--color-slate-500);
  --color-text-primary-hard: var(--color-slate-700);
  --color-text-secondary: var(--color-slate-700);
  --color-text-default: var(--color-slate-800);
  --color-text-default-soft: var(--color-slate-600);
  --color-text-default-soft-900: var(--color-slate-900);
  --color-text-default-soft-800: var(--color-slate-800);
  --color-text-default-soft-700: var(--color-slate-700);
  --color-text-default-soft-600: var(--color-slate-600);
  --color-text-default-soft-500: var(--color-slate-500);
  --color-text-default-soft-400: var(--color-slate-400);
  --color-text-default-soft-300: var(--color-slate-300);
  --color-text-default-soft-200: var(--color-slate-200);
  --color-text-default-soft-100: var(--color-slate-100);
  --color-text-default-soft-50: var(--color-slate-50);
  --color-text-inverse: var(--color-white);
  --color-text-inverse-soft: var(--color-slate-500);
  
      }