/* ==========================================================================
   tokens.css – lagrekkefølge og design-variabler. Lastes FØRST.
   Verdiene er de samme som på goalball.com (publikumsdelen: svart bakgrunn).
   ========================================================================== */
@layer tokens, base, components, page;

@layer tokens {
    :root {
        color-scheme: dark;

        /* Merkefarger */
        --brand-orange: rgb(255, 120, 0);
        --brand-orange-hover: rgb(230, 105, 0);
        --brand-blue: rgb(10, 35, 66);

        /* Flater */
        --bg-page: #000;
        --bg-panel: #0C1E30;
        --input-bg: #03080D;

        /* Kanter: --border-color er dekor, --border-ui må kunne ses (≥3:1 mot flatene) */
        --border-color: #1A3655;
        --border-ui: #4F6F96;

        /* Tekst */
        --text-strong: #FFFFFF;
        --text-main: #F5F5FA;
        --text-muted: #B0C4DF;

        /* Handlinger */
        --action-danger: #dc3545;
        --action-danger-hover: #c82333;
        --action-danger-text: #FF6B78;
        --text-success: #4ade80;

        /* Kortene: mørk flate, hvitt for spar og kløver, oransje for hjerter og ruter.
           Hvit 16:1 og oransje 6,6:1 mot kortflaten. */
        --card-face: #0C1E30;
        --card-ink: #FFFFFF;
        --card-red: rgb(255, 120, 0);
        --card-w: 3.6rem;

        --radius-s: 0.4rem;
        --radius-m: 0.6rem;
        --radius-l: 0.75rem;
        --focus-ring: 3px solid var(--text-strong);
    }
}