@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/bricolage-grotesque-600.ttf") format("truetype");
  }
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/inter-latin.woff2") format("woff2");
  }
  :root {
    
    --surface: #FBFCFA;
    --card: #FFFFFF;
    --tonal-container: #F1F5F0;
    --group-container: #F1F5F0;
    --honey-container: #FBEFD8;
    --honey-container-label: #8A5B00;
    --hairline: #E3EAE1;
    --chrome-surface: #F1F5F0;
    --text-primary: #16241D;
    --text-secondary: #51645B;
    --accent: #166A4C;
    --honey: #8A5B00;
    --primary-fill: #166A4C;
    --primary-label: #FFFFFF;
    --disabled-fill: #FFFFFF;
    --disabled-label: #51645B;
    --disabled-border: #51645B;
    --pressed-primary: #135d43;
    --pressed-secondary: #e3e6e2;
  
    --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
    --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --type-display-size: 1.75rem;
    --type-display-leading: 2.125rem;
    --type-display-weight: 600;
    --type-title-size: 1.25rem;
    --type-title-leading: 1.625rem;
    --type-title-weight: 600;
    --type-body-size: 1.0625rem;
    --type-body-leading: 1.5rem;
    --type-body-weight: 400;
    --type-secondary-size: 0.9375rem;
    --type-secondary-leading: 1.3125rem;
    --type-secondary-weight: 400;
    --type-caption-size: 0.8125rem;
    --type-caption-leading: 1.125rem;
    --type-caption-weight: 500;
  }
  @media (prefers-color-scheme: dark) {
    :root { 
    --surface: #13201A;
    --card: #1C2B24;
    --tonal-container: #13201A;
    --group-container: #1C2B24;
    --honey-container: #3A2C10;
    --honey-container-label: #F5BE5E;
    --hairline: #283A31;
    --chrome-surface: #1C2B24;
    --text-primary: #E4EDE7;
    --text-secondary: #A8BBB0;
    --accent: #82CFAC;
    --honey: #F5BE5E;
    --primary-fill: #F5BE5E;
    --primary-label: #13201A;
    --disabled-fill: #1C2B24;
    --disabled-label: #A8BBB0;
    --disabled-border: #A8BBB0;
    --pressed-primary: #ddab55;
    --pressed-secondary: #26322c;
   }
  }