@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/JetBrainsMono-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/JetBrainsMono-Bold.woff2') format('woff2');
}

:root {
    
    --background: #FAF5EB;
    --on-background: #141D17;
    --surface: #FAF5EB;
    --surface-dim: #DCCBAE;
    --surface-bright: #FFFFFF;
    --surface-container-lowest: #FFFFFF;
    --surface-container-low: #F4EAD5;
    --surface-container: #EFE0CE;
    --surface-container-high: #E9D7C7;
    --surface-container-highest: #DCCBAE;
    --surface-variant: #DCCBAE;

    
    --on-surface: #141D17;
    --on-surface-variant: #4F654A;
    --inverse-surface: #294733;
    --inverse-on-surface: #F4EAD5;

    
    --outline: #899065;
    --outline-variant: #D3BE9A;
    --border: #D3BE9A;
    --border-strong: #141D17;

    
    --primary: #294733;
    --on-primary: #FFFFFF;
    --primary-container: #4F654A;
    --on-primary-container: #DFE2CD;
    --inverse-primary: #AEB781;

    
    --secondary: #4F654A;
    --on-secondary: #FFFFFF;
    --secondary-container: #DFE2CD;
    --on-secondary-container: #294733;
    --tertiary: #8E4721;
    --on-tertiary: #FFFFFF;
    --tertiary-container: #E9D7C7;
    --on-tertiary-container: #4D270E;

    
    --error: #913136;
    --on-error: #FFFFFF;
    --error-container: #F5DFE0;
    --on-error-container: #913136;

    --warning: #8E4721;
    --on-warning: #FFFFFF;
    --warning-container: #FBF3D9;
    --on-warning-container: #2A1800;

    --success: #4F654A;
    /* --success measures 3.30 to 1 on a light surface, which is enough for an icon or a
       border but not for small text. This one measures 5.02 to 1 and reads the same green. */
    --success-strong: #4F654A;
    --on-success: #FFFFFF;
    --success-container: #DFE2CD;
    --on-success-container: #294733;

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

    
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    
    --font-ui: 'JetBrains Mono', monospace;
    --font-mono: 'JetBrains Mono', monospace;
}


.display-lg {
    font-family: var(--font-ui);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.headline-md {
    font-family: var(--font-ui);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.title-sm {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.body-md {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.data-tabular {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0em;
    font-variant-numeric: tabular-nums;
}

.label-caps {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}