@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
} 

html {
    font-family: var(--us-font-family-default);
} 

/* Typography Utility Classes */
  
/* Label */
.typo-label {
    font-size: var(--us-font-size-label);
    line-height: var(--us-line-height-label);
    font-weight: var(--us-font-weight-regular);
}

.typo-label-bold {
    font-size: var(--us-font-size-label-bold);
    line-height: var(--us-line-height-label-bold);
    font-weight: var(--us-font-weight-bold);
}
  
/* Body */
.typo-body {
    font-size: var(--us-font-size-body);
    line-height: var(--us-line-height-body);
    font-weight: var(--us-font-weight-regular);
}

.typo-body-bold {
    font-size: var(--us-font-size-body);
    line-height: var(--us-line-height-body-bold);
    font-weight: var(--us-font-weight-bold);
}
  
/* Heading 3 */
.typo-heading-3 {
    font-size: var(--us-font-size-heading-3);
    line-height: var(--us-line-height-heading-3);
    font-weight: var(--us-font-weight-bold);
}
  
/* Heading 2 */
.typo-heading-2 {
    font-size: var(--us-font-size-heading-2);
    line-height: var(--us-line-height-heading-2);
    font-weight: var(--us-font-weight-bold);
}
  
/* Heading 1 */
.typo-heading-1 {
    font-size: var(--us-font-size-heading-1);
    line-height: var(--us-line-height-heading-1);
    font-weight: var(--us-font-weight-bold);
}


:root {
    --us-placeholder: magenta;

    /* Radii / Micro */
    --us-radii-micro-small: 4px;
    --us-radii-micro-medium: 8px;
    --us-radii-micro-large: 16px;

    /* Radii / Macro */
    --us-radii-macro-small: 20px;
    --us-radii-macro-medium: 40px;
    --us-radii-macro-large: 60px;

    /* Radii / Other */
    --us-radii-full-flex: 9999999px;
    --us-radii-full-static: 50%; /* Needed when value should remain constant regardless of theme. */

    /* Font Sizes */
    --us-font-size-label: 12px;  /* Label styles are smaller, utilitarian styles, used for things like the text inside components or for very small text in the content body, such as captions. */
    --us-font-size-label-bold: 12px; /* Label styles are smaller, utilitarian styles, used for things like the text inside components or for very small text in the content body, such as captions. */
    --us-font-size-body: 14px;
    --us-font-size-body-bold: 14px;
    --us-font-size-heading-3: 16px;
    --us-font-size-heading-2: 20px;
    --us-font-size-heading-1: 30px;
    
    /* Line Heights */
    --us-line-height-label: 1.3;
    --us-line-height-label-bold: 1.3;
    --us-line-height-body: 1.5;
    --us-line-height-body-bold: 1.5;
    --us-line-height-heading-3: 1.25;
    --us-line-height-heading-2: 1.2;
    --us-line-height-heading-1: 1.2;
  
    /* Font Weights */
    --us-font-weight-regular: 400;
    --us-font-weight-bold: 500;
    
    /* Letter Spacing (all 0em) */
    --us-letter-spacing-default: 0em;
    
    /* Font Families */
    --us-font-family-default: "IBM Plex Mono";
}

/* THEMING THEMING THEMING THEMING THEMING THEMING */
:root {
    /* Foreground (fg) */
    --us-fg-default: #171717;
    --us-fg-subtext: #6F6F6F;
    --us-fg-inverse: #FFFFFF;

    /* Foreground for large elements (fg / forLarge) */
    --us-fg-variant: #858585;

    /* Background (bg) */
    --us-bg-canvas: #FFFFFF;
    --us-bg-lowest: #F8F8F8;
    --us-bg-low: #F3F3F3;
    --us-bg-mid: #EDEDED;
    --us-bg-high: #E8E8E8;
    --us-bg-invert-canvas: #000000;

    /* Border */
    --us-border-hard: #C7C7C7;
    --us-border-medium: #E8E8E8;
    --us-border-soft: #F3F3F3;

    /* Accent */
    --us-accent-high: #793AAF;
}
@media (prefers-color-scheme: dark) {
    :root {
        /* Foreground (fg) */
        --us-fg-default: #EDEDED;
        --us-fg-subtext: #A0A0A0;
        --us-fg-inverse: #000000;

        /* Foreground for large elements (fg / forLarge) */
        --us-fg-variant: #7E7E7E;

        /* Background (bg) */
        --us-bg-canvas: #000000;
        --us-bg-lowest: #1C1C1C;
        --us-bg-low: #232323;
        --us-bg-mid: #282828;
        --us-bg-high: #2E2E2E;
        --us-bg-invert-canvas: #FFFFFF;

        /* Border */
        --us-border-hard: #505050;
        --us-border-medium: #2E2E2E;
        --us-border-soft: #232323;

        /* Accent */
        --us-accent-high: #BF7AF0;
    }
}