/* ════════════════════════════════════════════════════════════════════════
   tokens.css — designsystemets ENESTE kilde til farve, form og typografi.
   Jf. DESIGNSYSTEM_PLAN.md, etape 1.

   Reglen: ingen anden fil må indeholde en hex-værdi til brand-, tekst-,
   baggrunds- eller kantfarve. Skal en farve ændres, ændres den her.

   Filen indlæses FØR site.css i alle fire layouts (_Layout, _Portal_Layout,
   _NeutralLayout, Portal/Login) og af wwwroot/farveprove.html, der viser
   tokens frem i stedet for at kopiere dem.

   Rækkefølge i filen:
     1. Primitiver      — den rå palet, refereres ikke direkte af komponenter
     2. Semantiske      — roller ("hvad bruges farven til")
     3. Bagudkompatible aliaser — portalens oprindelige variabelnavne
     4. Form, skygge, typografi
     5. Bootstrap-broen — så admin-fladen arver uden at hver side røres
   ════════════════════════════════════════════════════════════════════════ */

/* ── Barlow — produktets typografi (etape 0-valg) ───────────────────────── */
/* Selvhostet fra wwwroot/fonts (latin-subset, woff2, Barlow v13 fra Google
   Fonts — SIL Open Font License). Ingen CDN-afhængighed; font-display: swap
   viser system-ui, indtil filen er hentet. Kursiv er udeladt med vilje —
   browseren syntetiserer den, og UI'et bruger den næsten ikke. */
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/barlow-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/barlow-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/barlow-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/barlow-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/barlow-800.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
    /* ── 1. Primitiver ──────────────────────────────────────────────────── */

    /* Brand: indigo. Valgt i etape 0 — 500 er portalens oprindelige
       --accent-open, så portalen skifter ikke udseende ved denne omlægning. */
    --bp-indigo-50:  #eef2ff;
    --bp-indigo-100: #e0e7ff;
    --bp-indigo-200: #c7d2fe;
    --bp-indigo-400: #818cf8;
    --bp-indigo-500: #6366f1;
    --bp-indigo-600: #4f46e5;
    --bp-indigo-700: #4338ca;
    --bp-indigo-900: #312e81;

    /* Neutraler: slate — portalens oprindelige skala */
    --bp-slate-50:  #f8fafc;
    --bp-slate-100: #f1f5f9;
    --bp-slate-200: #e8edf3;
    --bp-slate-300: #dde3ee;
    --bp-slate-500: #94a3b8;
    --bp-slate-600: #64748b;
    --bp-slate-800: #1e293b;

    --bp-white: #ffffff;

    /* Status */
    --bp-green-50:  #f0fdf4;
    --bp-green-100: #dcfce7;
    --bp-green-500: #22c55e;
    --bp-green-600: #16a34a;
    --bp-green-700: #15803d;
    --bp-amber-50:  #fefce8;
    --bp-amber-100: #fef08a;
    --bp-amber-200: #fde047;
    --bp-amber-800: #92400e;
    --bp-red-600:   #dc2626;

    /* ── 2. Semantiske roller ───────────────────────────────────────────── */

    --bp-brand:          var(--bp-indigo-500);
    --bp-brand-hover:    var(--bp-indigo-600);
    --bp-brand-active:   var(--bp-indigo-700);
    --bp-brand-subtle:   var(--bp-indigo-50);
    --bp-brand-border:   var(--bp-indigo-200);
    --bp-brand-rgb:      99, 102, 241;

    --bp-bg-page:        #f1f4f8;
    --bp-bg-card:        var(--bp-white);
    --bp-bg-subtle:      var(--bp-slate-50);
    --bp-bg-sunken:      var(--bp-slate-100);

    --bp-text-primary:   var(--bp-slate-800);
    --bp-text-secondary: var(--bp-slate-600);
    --bp-text-muted:     var(--bp-slate-500);
    --bp-text-on-brand:  var(--bp-white);

    --bp-border-subtle:  var(--bp-slate-200);
    --bp-border:         var(--bp-slate-300);

    --bp-success:        var(--bp-green-600);
    --bp-success-bg:     var(--bp-green-50);
    --bp-success-text:   var(--bp-green-700);
    --bp-warning:        var(--bp-amber-200);
    --bp-warning-bg:     var(--bp-amber-50);
    --bp-warning-text:   var(--bp-amber-800);
    --bp-danger:         var(--bp-red-600);

    /* ── Domænefarver ───────────────────────────────────────────────────── */
    /* Betyder noget bestemt i badminton-domænet og hører derfor ikke under
       brand- eller statusrollerne. */
    --bp-koen-mand:    #4a90d9;
    --bp-koen-kvinde:  #e879a0;
    --bp-kamp-gentag:  #e67e00;   /* samme fire spillere igen */
    --bp-kamp-trio:    var(--bp-indigo-400);   /* tre spillere på bane igen */

    /* ── Tidspunkt-paletten: produktets signatur ────────────────────────── */
    /* Otte pasteller, cyklisk. Farvekoder mødetider i spilleplanen og er
       samtidig produktets accentsystem og mærke (DESIGNSYSTEM_PLAN.md).
       Rækkefølgen er valgt så 7→0-ombrydningen er tydelig — den må ikke
       omrokeres uden at tjekke netop det. */
    --bp-tid-0: #dbeafe;  /* blå      */
    --bp-tid-1: #dcfce7;  /* grøn     */
    --bp-tid-2: #fef9c3;  /* gul      */
    --bp-tid-3: #fce7f3;  /* pink     */
    --bp-tid-4: #f3e8ff;  /* lavendel */
    --bp-tid-5: #ffedd5;  /* orange   */
    --bp-tid-6: #ccfbf1;  /* teal     */
    --bp-tid-7: #ffe4e6;  /* rose     */

    /* ── 3. Bagudkompatible aliaser ─────────────────────────────────────── */
    /* Portalens oprindelige navne, som ~50 regler i _Portal_Layout stadig
       bruger. Beholdt bevidst: omdøbning ville være en stor, risikabel diff
       uden gevinst. Værdierne kommer nu herfra, ikke fra view-filen. */
    --accent-open:       var(--bp-brand);
    --accent-registered: var(--bp-success);
    --accent-locked:     var(--bp-text-muted);
    --bg-page:           var(--bp-bg-page);
    --bg-card:           var(--bp-bg-card);
    --text-primary:      var(--bp-text-primary);
    --text-secondary:    var(--bp-text-secondary);
    --text-muted:        var(--bp-text-muted);
    --border-subtle:     var(--bp-border-subtle);

    /* ── 4. Form, skygge, typografi ─────────────────────────────────────── */

    --bp-radius-sm:   8px;
    --bp-radius:      10px;
    --bp-radius-lg:   12px;
    --bp-radius-pill: 99px;

    --bp-shadow-sm:   0 1px 3px rgba(0, 0, 0, .05);
    --bp-shadow-card: 0 1px 3px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .04);

    /* Barlow: grotesk fra vejskilte — sporty, lav kontrast og en anelse smal,
       hvilket er en reel gevinst i spilleplan- og medlemstabellerne.
       Selvhostet (se @font-face nedenfor); indtil skrifterne er lagt ind,
       falder stakken pænt tilbage på system-ui. */
    --bp-font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bp-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

    /* Typografisk skala (etape 3). Bruges af nye komponenter; den globale
       html{font-size} i site.css er bevidst IKKE rørt endnu — se DESIGNSYSTEM_PLAN.md
       etape 3, hvor udskiftningen kræver visuel gennemgang af alle admin-sider. */
    --bp-text-xs:  .75rem;
    --bp-text-sm:  .875rem;
    --bp-text-md:  1rem;
    --bp-text-lg:  1.125rem;
    --bp-text-xl:  1.375rem;
    --bp-text-2xl: 1.75rem;

    --bp-weight-normal:   400;
    --bp-weight-medium:   500;
    --bp-weight-semibold: 600;
    --bp-weight-bold:     700;
    --bp-weight-heavy:    800;

    --bp-focus-ring: 0 0 0 3px rgba(var(--bp-brand-rgb), .35);
}

/* ── 5. Bootstrap-broen ─────────────────────────────────────────────────── */
/* Bootstrap 5.3 læser en del direkte fra :root, men komponenter som .btn
   sætter deres egne --bs-btn-*. Derfor både variabel-broen her og de
   eksplicitte komponent-overskrivninger nedenfor. */

:root {
    --bs-primary:         var(--bp-brand);
    --bs-primary-rgb:     var(--bp-brand-rgb);
    --bs-link-color:      var(--bp-brand);
    --bs-link-color-rgb:  var(--bp-brand-rgb);
    --bs-link-hover-color: var(--bp-brand-hover);

    --bs-body-font-family: var(--bp-font-sans);
    --bs-body-color:       var(--bp-text-primary);
    --bs-secondary-color:  var(--bp-text-secondary);

    --bs-border-color:     var(--bp-border);
    --bs-border-radius:    var(--bp-radius-sm);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--bp-radius-lg);
    --bs-border-radius-pill: var(--bp-radius-pill);
}

.btn-primary {
    --bs-btn-bg:                 var(--bp-brand);
    --bs-btn-border-color:       var(--bp-brand);
    --bs-btn-hover-bg:           var(--bp-brand-hover);
    --bs-btn-hover-border-color: var(--bp-brand-hover);
    --bs-btn-active-bg:          var(--bp-brand-active);
    --bs-btn-active-border-color: var(--bp-brand-active);
    --bs-btn-disabled-bg:        var(--bp-brand);
    --bs-btn-disabled-border-color: var(--bp-brand);
    --bs-btn-focus-shadow-rgb:   var(--bp-brand-rgb);
}

.btn-outline-primary {
    --bs-btn-color:              var(--bp-brand);
    --bs-btn-border-color:       var(--bp-brand);
    --bs-btn-hover-bg:           var(--bp-brand);
    --bs-btn-hover-border-color: var(--bp-brand);
    --bs-btn-active-bg:          var(--bp-brand-active);
    --bs-btn-active-border-color: var(--bp-brand-active);
    --bs-btn-disabled-color:     var(--bp-brand);
    --bs-btn-disabled-border-color: var(--bp-brand);
    --bs-btn-focus-shadow-rgb:   var(--bp-brand-rgb);
}

/* ── Fokus-ring (etape 4) ───────────────────────────────────────────────── */
/* Dobbelt ring — hvid inderst, brand yderst — så den er synlig uanset om
   baggrunden er hvid (admin-tabeller), --bp-bg-page (portal) eller brand-mørk
   (neutral hero). Den gamle ring antog hvid baggrund og forsvandt på resten.
   :focus-visible frem for :focus: musetryk skal ikke tegne ringen. */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bp-bg-card), 0 0 0 4px var(--bp-brand) !important;
}

/* Formularfelter: Bootstrap hardkoder den blå fokusfarve — retunes til brand.
   Ved tastaturfokus vinder :focus-visible-reglen ovenfor. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bp-indigo-400);
    box-shadow: var(--bp-focus-ring);
}

.form-check-input:checked {
    background-color: var(--bp-brand);
    border-color: var(--bp-brand);
}

/* Bootstrap's .bg-primary/.text-primary/.border-primary følger automatisk med
   via --bs-primary-rgb; .badge bg-primary ligeså. */

/* ── Reduceret bevægelse (etape 4) ──────────────────────────────────────── */
/* Slår al animation og transition fra for brugere, der har bedt OS'et om det
   — dækker successFlash, tabel-hover, portalens slideup-ark m.m. uden at
   hver enkelt regel skal huske det. .01ms frem for 0: transitionend-events
   affyres stadig, så JS der venter på dem hænger ikke. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}