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

:root {
    --bonster-primary-cyan: #00BCD4;
    --bonster-light-cyan: #B2EBF2;
    --bonster-bg-start: #f5f5f5;
    --bonster-bg-end: #e8e8e8;
    --bonster-text-primary: #1a1a1a;
    --bonster-text-light: #333333;
    --bonster-text-muted: #666666;
    --bonster-border-subtle: rgba(0, 0, 0, 0.1);
    --bonster-border-cyan: rgba(0, 188, 212, 0.3);
}

html,
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    background: linear-gradient(180deg, var(--bonster-bg-start) 0%, var(--bonster-bg-end) 100%) fixed;
    -webkit-font-smoothing: antialiased;
}

.dxbl-app,
.xaf-blazor-app,
#app {
    background: transparent;
}

.header,
header,
.xaf-header,
.dxbl-app-header {
    border-bottom: 1px solid var(--bonster-border-cyan);
}

:focus-visible {
    outline: 2px solid var(--bonster-primary-cyan);
    outline-offset: 2px;
}