@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600&display=swap');

:root {
    --accent-color-base: var(--accent-base, #FFB37A);
    --accent-color-fill-rest: var(--accent-fill-rest, #FFB37A);
    --accent-color-fill-hover: var(--accent-fill-hover, #FF954D);
    --accent-color-fill-active: var(--accent-fill-active, #E0823D);
    --accent-foreground: var(--foreground-on-accent-rest, #2D2D2D);
    --neutral-color-fill-rest: var(--neutral-fill-rest, #FAF9F6);
    --neutral-color-fill-hover: var(--neutral-fill-hover, #EFEFEF);
    --neutral-color-stroke: var(--neutral-stroke-rest, #E0E0E0);
    --neutral-foreground: var(--neutral-foreground-rest, #2D2D2D);
    --neutral-background: var(--neutral-layer-2, #FFFFFF);
    --neutral-background-transparent: rgba(255, 255, 255, 0.75);
    --corner-radius: var(--control-corner-radius, 6px);
    --accent-glow-opacity: 0.15;
    --accent-glow-hover: 0.3;
}

@media (prefers-color-scheme: dark) {
    :root {
        --neutral-color-fill-rest: #2D2D2D;
        --neutral-color-fill-hover: #3D3D3D;
        --neutral-color-stroke: #404040;
        --neutral-foreground: #E0E0E0;
        --neutral-background: #2D2D2D;
        --neutral-background-transparent: rgba(30, 30, 30, 0.85);
        --accent-glow-opacity: 0.08;
        --accent-glow-hover: 0.25;
    }
}

body, html {
    font-family: 'Roboto Mono', monospace !important;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: var(--neutral-foreground) !important;
    background-color: var(--neutral-background) !important;
}

fluent-button,
fluent-message-bar,
fluent-text-field,
fluent-text-area,
fluent-select,
fluent-checkbox,
fluent-radio,
fluent-tab,
fluent-label {
    font-family: 'Roboto Mono', monospace !important;
}

    fluent-text-field::part(label),
    fluent-text-area::part(label),
    fluent-select::part(label) {
        font-family: 'Roboto Mono', monospace !important;
    }

button, input, select, textarea, optgroup {
    font-family: 'Roboto Mono', monospace !important;
}

label, p, h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Mono', monospace !important;
}

input[type="password"],
input[type="text"] {
    letter-spacing: 0.5px;
}

code, pre, kbd, samp {
    font-family: 'Roboto Mono', monospace !important;
    font-size: 0.9em;
    background-color: rgba(255, 179, 122, 0.2);
    padding: 2px 6px;
    border-radius: var(--corner-radius);
}

a {
    font-family: 'Roboto Mono', monospace !important;
    color: var(--accent-color-fill-hover) !important;
    text-decoration: none;
}