@property --color-dark {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-text {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-alice {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-white {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-coffee {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --font-h1-37px {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --font-h2-29px {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --font-h3-24px {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --font-h4-21px {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --font-h5-19px {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --font-h6-18px {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --color-jasmine {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-ink-blue {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --color-jet-grey {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --font-base-16px {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --font-paragraph {
  syntax: "<custom-ident> | <string>";
  inherits: true;
  initial-value: sans-serif;
}
@property --color-wine-plum {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --font-small-14px {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --color-alice-blue {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --font-xsmall-12px {
  syntax: "*";
  inherits: true;
  initial-value: ;
}
@property --color-jungle-teal {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

  :host, :root {
  --color-dark: #01040D;
  --color-text: #010309;
  --color-alice: #eff0f1;
  --color-white: #FFFFFF;
  --color-coffee: #281607;
  --font-h1-37px: 2.313rem;
  --font-h2-29px: 1.813rem;
  --font-h3-24px: 1.5rem;
  --font-h4-21px: 1.313rem;
  --font-h5-19px: 1.188rem;
  --font-h6-18px: 1.125rem;
  --color-jasmine: #E1AF43;
  --color-ink-blue: #030E24;
  --color-jet-grey: #2F323A;
  --font-base-16px: 1rem;
  --font-paragraph: "Hanken Grotesk";
  --color-wine-plum: #6B1E2E;
  --font-small-14px: 0.875rem;
  --color-alice-blue: #DDE3EA;
  --font-xsmall-12px: 0.75rem;
  --color-jungle-teal: #0E7A5F;
}
  
  
  [data-nc-theme~="Default"] {
  --color-dark: #01040D;
  --color-text: #010309;
  --color-alice: #eff0f1;
  --color-white: #FFFFFF;
  --color-coffee: #281607;
  --font-h1-37px: 2.313rem;
  --font-h2-29px: 1.813rem;
  --font-h3-24px: 1.5rem;
  --font-h4-21px: 1.313rem;
  --font-h5-19px: 1.188rem;
  --font-h6-18px: 1.125rem;
  --color-jasmine: #E1AF43;
  --color-ink-blue: #030E24;
  --color-jet-grey: #2F323A;
  --font-base-16px: 1rem;
  --font-paragraph: "Hanken Grotesk";
  --color-wine-plum: #6B1E2E;
  --font-small-14px: 0.875rem;
  --color-alice-blue: #DDE3EA;
  --font-xsmall-12px: 0.75rem;
  --color-jungle-teal: #0E7A5F;
}
    


@layer base {
  
  body, :host {
    /* Color */
    
    /* Fonts */
    --font-sans: 'Inter',sans-serif;
--font-Hanken Grotesk: 'Hanken Grotesk',sans-serif;

    /* Font size */
    
    /* Font weight */
    
    /* Shadows */
    
    /* Border radius */
    
    /* Spacing */
    
    /* Z-index */
    
  }
  @keyframes animation-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes animation-fade-in {
    from {
      opacity:0;
    }
    to {
      opacity:1;
    }
  }
  @keyframes animation-fade-out {
    from {
      opacity:1;
    }
    to {
      opacity:0;
    }
  }
}