@font-face {
    font-family: 'Bebas Neue';
    src: url('/fonts/bebas-neue-v16-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/dm-sans-v17-latin-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/dm-sans-v17-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/dm-sans-v17-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-background:           #faf8f1;
    --color-surface:              #fcfbf4;
    --color-surface-raised:       #fdfdfc;
    --color-border:               #e8c7bb;
    --color-text:                 #2a1510;
    --color-text-secondary:       #8a5a50;
    --color-confirmation:         #a33219;
    --color-confirmation-primary: #e54c46;
    --color-confirmation-hover:   #d94a28;
    --color-confirmation-dark:    #7a2412;
    --color-highlight:            #ed3137;
    --color-highlight-dim:        #b8242a;
    --color-team-a:               #a33219;
    --color-team-b-header:        rgba(232,199,187,0.3);
    --color-team-b-border:        rgba(232,199,187,0.5);
    --color-team-b-label:         #8a5a50;
    --color-team-b-bar:           #c9a090;
    --color-form-win:             #2d9e57;
    --color-form-draw:            #8a8a8a;
    --color-form-loss:            #e05555;
    --color-rank-1:               #c8960c;
    --color-rank-1-bg:            rgba(200,150,12,0.12);
    --color-rank-2:               #8fa8b8;
    --color-rank-2-bg:            rgba(143,168,184,0.12);
    --color-rank-3:               #a0724a;
    --color-rank-3-bg:            rgba(160,114,74,0.12);
    --color-destructive:          #ed3137;
    --color-link:                 #1a5fa8;
    --color-input-background:     #f5f3ea;
    --color-select-option-bg:     #fcfbf4;
    --color-on-dark:              #fdfdfc;
    --color-confirmation-glow:          rgba(229,76,70,0.25);
    --color-confirmation-glow-strong:   rgba(229,76,70,0.4);
    --color-confirmation-glow-medium:   rgba(229,76,70,0.45);
    --color-confirmation-focus-ring:    rgba(229,76,70,0.12);
    --color-confirmation-tint-xs:       rgba(229,76,70,0.05);
    --color-confirmation-tint-sm:       rgba(229,76,70,0.08);
    --color-confirmation-tint-md:       rgba(229,76,70,0.1);
    --color-confirmation-tint-lg:       rgba(229,76,70,0.12);
    --color-confirmation-tint-xl:       rgba(229,76,70,0.2);
    --color-confirmation-border:        rgba(229,76,70,0.35);
    --color-grid-line:                  rgba(163,50,25,0.05);
    --color-team-a-tint:                rgba(163,50,25,0.08);
    --color-team-a-border:              rgba(163,50,25,0.2);
    --color-destructive-tint:           rgba(224,85,85,0.1);
    --color-destructive-border:         rgba(224,85,85,0.3);
    --color-destructive-focus-ring:     rgba(224,85,85,0.12);
    --color-destructive-tint-md:        rgba(224,85,85,0.12);
    --color-placement-row-bg:           rgba(250,248,241,0.7);
    --color-selected-row-bg:            rgba(229,76,70,0.1);
    --color-modal-backdrop:             rgba(0,0,0,0.6);
    --color-donation-backdrop:          rgba(0,0,0,0.6);
    --color-backdrop:                   rgba(0,0,0,0.6);
    /* ── Help button ── */
    --color-help-border:                rgba(229,76,70,0.3);
    --color-help-tint:                  rgba(229,76,70,0.07);
    --color-help-primary:               #e54c46;
    --color-help-focus:                 rgba(229,76,70,0.15);
}