/* =====================================================
   tt-tokens.css  (1/10)
   Designtokens: CSS-variabler (mörkt + ljust tema) och @font-face-override för Font Awesome.
   Laddas i fast ordning, se kommentaren i början av Default.aspx.
   ===================================================== */

/* --- CSS-variabler ---------------------------------- */
:root
{ 
    --screen-min: 1920px;
    --screen-max: 1920px;
    --font-min: calc(var(--screen-min) * 0.006667);
    --safari-zoom: 1;
    font-size: max(var(--font-min), 0.6667vw);
    --top-bar-height: 73px;
    /* Statusradens höjd (#races-status är fixed mot fönstrets nederkant).
       Läses även av #right-panels-wrap, som inte får hamna bakom den. */
    --statusrad-hojd: 24px;
    --bg-darkest: #0d0f14;
    --bg-darkest-alt: #1a1e2e;
    --bg-dark: #141720;
    --bg-mid: #1c2030;
    --bg-card: #1f2438;
    --bg-card-alt: #242840;
    --bg-input-alt: #3c4263;
    --border-color: #2e3350;
    --border-brighter: #575d7e;
    --gold: #c9a227;
    --gold-light: #e8c55a;
    --gold-dim: #7a6218;
    --text-white: #ffffff;
    --text-bright: #f2f3f8;
    --text-pale: #cfd0d4;
    --text-primary: #e8eaf2;
    --text-muted: #949dc2;
    --text-dim: #a2acd5;
    --text-red: #dd7777;
    --text-vinst: rgb(181, 174, 155);
    --sidebar-w: 300px;
    /* Analyspanelens bredd. Läses även av #panel-toggle-row, vars vänstra
       kolumn måste sluta exakt vid spelpanelens högerkant. */
    --analys-panel-w: 165px;
    --col-head-height: 107px;
    --status-results: #22c55e;
    --status-ongoing: #f59e0b;
    --status-upcoming: #60a5fa;
    --status-bettable: #a78bfa;
    --status-scheduled: #6b7280;
    --status-winner: #f97316;
    --status-place: #84cc16;
    --font-sans: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'Courier New', Courier, monospace;
    /* --- Övriga färger (tema-beroende) ---------------- */
    --hover-overlay-3: rgba(255,255,255,0.05);
    --border-soft: rgba(46,51,80,0.5);
    --border-soft-weak: rgba(46,51,80,0.3);
    --border-soft-strong: rgba(46,51,80,0.7);
    --gold-tint-1: rgba(201,162,39,0.06);
    --gold-tint-3: rgba(201,162,39,0.1);
    --gold-tint-5: rgba(201,162,39,0.25);
    --jackpot-color: #4ade80;
    --jackpot-tint: rgba(74,222,128,0.1);
    --jackpot-border-tint: rgba(74,222,128,0.4);
    --gold-shadow: rgba(201,162,39,0.3);
    --danger: #f87171;
    --danger-tint: rgba(239,68,68,0.15);
    --finish-pos-2: #9ca3af;
    --finish-pos-3: #a0714c;
    --locked-text: #7ec8f5;
    --locked-border: #2a6a9e;
    --locked-bg: rgba(74,158,221,0.07);
    --locked-checkbox-border: #6c77a3;
    --locked-checkbox-border-checked: #4a9edd;
    --accent-border: #3d4470;
    --status-results-tint: rgba(34,197,94,0.15);
    --status-ongoing-tint: rgba(245,158,11,0.15);
    --status-upcoming-tint: rgba(96,165,250,0.15);
    --status-bettable-tint: rgba(167,139,250,0.15);
    --status-scheduled-tint: rgba(107,114,128,0.15);
    --status-winner-tint: rgba(249,115,22,0.15);
    --status-place-tint: rgba(132,204,22,0.15);
    --badge-text: #0a0a0a;
    --momentum-color: #34d399;
    --upplopps-hast: #a58260;
    --upplopps-gold: #e8c55a;
    --upplopps-bana: linear-gradient(90deg,rgba(95, 104, 139, 1) 0%, rgba(95, 104, 139, 0.3) 10%, rgba(31, 36, 56, 1) 10%, rgba(31, 36, 56, 1) 100%);
    --upplopps-bana-border: #2e3350;
    /* Caret i select-element (.kupong-select, #sort-extra-select, .spikmetod-select).
       Fyllningen kan inte vara en CSS-variabel inuti en data-URI, så den står som hex och
       måste följa scopets --text-muted: det är den färgen Bootstraps dropdown-careter får,
       eftersom de ritas med currentColor från knappen (.settings-select-btn,
       .rader-snabbval-toggle, .spikar-snabbval-toggle - alla --text-muted). Token finns
       därför i fyra varianter: här, i [data-theme="light"] och i de två panelscopen längre
       ned. Ändras --text-muted i ett scope ska pilen ändras där. */
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23949dc2' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    /* --- Delade tokens (samma i båda teman) ------------ */
    --paper-bg: rgb(255, 246, 207);
    --paper-ink: rgb(89, 89, 83);
    --paper-line: rgb(215, 209, 186);
    --popup-shadow: rgba(0, 0, 0, 0.4);
    --popup-shadow-soft: rgba(0, 0, 0, 0.35);
    /* --- Lopp-kolumnhuvudets bakgrund ----------------- */
    /* Samma kodning som i ljust tema, speglad i ljushet: okört lopp är
       basytan, kört sjunker ett par steg mot sidbakgrunden, och rätt/fel
       lyfter tillbaka nästan till basens ljushet men bär hue 120° / 0° –
       samma två kulörer som ljusa temats #edffed och #ffeded. */
    --lopp-head-bg: var(--bg-card-alt);
    --lopp-head-klar-bg: #1a1e2d;
    --lopp-head-ratt-bg: #1e381e;
    --lopp-head-fel-bg: #381e1e;
    /* --- Loppnummer i kolumnhuvud --------------------- */
    /* OBS: sedan 2026-10-09 är --nr-bg sifferfärgen och ramen, inte
       bakgrunden; cirkelns bakgrund är --bg-card. --nr-bg måste därför
       vara enfärgad (används i color och border). */
    --nr-bg: #b9c2dd;
    --nr-shadow: rgb(188 187 185 / 43%);
    --nr-klar-bg: linear-gradient(135deg, #104e0f, #2c8e1e);
    --nr-klar-color: #bcc5da;
    --nr-klar-shadow: rgb(103 228 103 / 30%);
    /* --- Hästkortet (startnummerring och avdelare) ----- */
    --hast-nr-ring: #5b86b8;
    --hast-nr-text: #d4dcef;
    --hast-nr-bg: var(--bg-mid);
    --hast-divider: rgba(255,255,255,0.13);
    --hast-kusk-color: var(--text-muted);
    /* Siffersnitt: Archivo smalnat till 87,5 procent av normalbredden */
    --font-tal: 'Archivo', 'Montserrat', 'Segoe UI', sans-serif;
    --font-tal-bredd: 87.5%;
}

body.ipad-zoom
{
    --sidebar-w: 375px;
}

/* --- Ljust tema --------------------------------------- */
[data-theme="light"]
{
    --bg-darkest: #f4f5f9;
    --bg-darkest-alt: #e7eaf3;
    --bg-dark: #ffffff;
    --bg-mid: #f8fbff;
    --bg-card: #ffffff;
    --bg-card-alt: #e3e6eb;
    --bg-input-alt: #d6dbf6;
    --border-color: #a6aabb;
    --border-brighter: #a4a9bc;
    --gold: #b8860b;
    --gold-light: #8c6402;
    --gold-dim: #c9a227;
    --text-white: #000000;
    --text-bright: #1a1d2e;
    --text-pale: #787a80;
    --text-primary: #2c3050;
    --text-muted: #6b7280;
    --text-dim: #555c80;
    /* Caret i select-element, samma färg som --text-muted ovan (se :root). Saknades här
       till 2026-10-10 och ärvde då mörka temats gråa pil. */
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    --text-red: #dd0000;
    --text-vinst: rgb(83, 75, 53);
    --status-results: #16a34a;
    --status-ongoing: #d97706;
    --status-upcoming: #2563eb;
    --status-bettable: #7c3aed;
    --status-scheduled: #6b7280;
    --status-winner: #ea580c;
    --status-place: #65a30d;
    --hover-overlay-3: rgba(0,0,0,0.05);
    --border-soft: rgba(0,0,0,0.10);
    --border-soft-weak: rgba(0,0,0,0.06);
    --border-soft-strong: rgba(0,0,0,0.16);
    --gold-tint-1: rgba(184,134,11,0.08);
    --gold-tint-3: rgba(184,134,11,0.12);
    --gold-tint-5: rgba(184,134,11,0.25);
    --jackpot-color: #15803d;
    --jackpot-tint: rgba(21,128,61,0.12);
    --jackpot-border-tint: rgba(21,128,61,0.4);
    --gold-shadow: rgba(184,134,11,0.3);
    --danger: #dc2626;
    --danger-tint: rgba(220,38,38,0.12);
    --finish-pos-2: #6b7280;
    --finish-pos-3: #8a5a2b;
    --locked-text: #1e6fa8;
    --locked-border: #4a9edd;
    --locked-bg: rgba(74,158,221,0.12);
    --locked-checkbox-border: #8d96ba;
    --locked-checkbox-border-checked: #2a6a9e;
    --accent-border: #c7cce0;
    --status-results-tint: rgba(22,163,74,0.14);
    --status-ongoing-tint: rgba(217,119,6,0.14);
    --status-upcoming-tint: rgba(37,99,235,0.13);
    --status-bettable-tint: rgba(124,58,237,0.13);
    --status-scheduled-tint: rgba(107,114,128,0.15);
    --status-winner-tint: rgba(234,88,12,0.14);
    --status-place-tint: rgba(101,163,13,0.14);
    --badge-text: #f1eeee;
    --momentum-color: #059669;
    --upplopps-hast: #a58260;
    --upplopps-gold: #e8af00;
    --upplopps-bana: linear-gradient(90deg, rgb(143 151 184) 0%, rgba(143, 151, 184, 0.3) 10%, rgb(222 223 231) 10%, rgb(222 223 231) 100%);
    --upplopps-bana-border: #9296a5;
    /* --- Lopp-kolumnhuvudets bakgrund ----------------- */
    --lopp-head-bg: #f7f7f7;
    --lopp-head-klar-bg: #e2e6eb;
    --lopp-head-ratt-bg: #edffed;
    --lopp-head-fel-bg: #ffeded;
    --nr-bg: #5b5f81;
    --nr-shadow: rgb(21 20 20 / 43%);
    --nr-klar-bg: linear-gradient(135deg, #cdf8cd, #6a9a64);
    --nr-klar-color: #37383b;
    --nr-klar-shadow: rgb(103 228 103 / 41%);
    /* --- Hästkortet (startnummerring och avdelare) ----- */
    --hast-nr-ring: #2f86e0;
    --hast-nr-text: #1e6fa8;
    --hast-nr-bg: transparent;
    --hast-divider: rgba(0,0,0,0.12);
    --hast-kusk-color: var(--text-muted);
    /* Siffersnitt: Archivo smalnat till 87,5 procent av normalbredden */
    --font-tal: 'Archivo', 'Montserrat', 'Segoe UI', sans-serif;
    --font-tal-bredd: 87.5%;
}

/* --- Ljust tema: blå ram runt innehållet ----------------
   Topbaren och de båda sidopanelerna är mörkblå i ljust tema medan lopp-
   kolumnerna är ljusa. I stället för att skriva om tt-topbar.css och
   tt-sidebar.css definieras tokens om för just de tre behållarna – allt
   innanför ärver dem automatiskt. Mörkt tema berörs inte.

   Färgerna är hämtade ur designskissen:
     #004598  topbar
     #003d86  panelernas yta
     #002e73  mörkare band, panelrubriker
     #2665ab  upphöjda ytor: fält, selects, knappar
     #ffbb0a  guldaccent (logotyp, värden, markeringar)

   Statusfärgerna sätts till mörka temats varianter – de ljusa är avstämda
   mot vit bakgrund och blir för mörka här. */
[data-theme="light"] #sidebar-header,
[data-theme="light"] #top-bar,
[data-theme="light"] #right-panels-wrap
{
    /* Ärvd textfärg. Att bara byta --text-primary räcker inte: html-elementet
       sätter color: var(--text-primary) i tt-base.css, och den färgen räknas ut
       DÄR – utanför det här scopet. Allt som inte sätter egen color ärver alltså
       den mörka sidfärgen rakt in i panelerna. Sätts den om här ärver de vitt. */
    color: var(--text-primary);

    /* Ytor */
    --bg-darkest: #004598;
    --bg-darkest-alt: #004598;
    --bg-dark: #003d86;
    --bg-card: #003d86;
    --bg-card-alt: #002e73;
    --bg-mid: #2665ab;
    --bg-input-alt: #2665ab;

    /* Linjer */
    --border-color: var(--border-brighter);
    --border-brighter: #3b74b4;
    --accent-border: var(--border-brighter);
    --border-soft: rgba(255,255,255,0.14);
    --border-soft-weak: rgba(255,255,255,0.08);
    --border-soft-strong: rgba(255,255,255,0.22);

    /* Text */
    --text-white: #ffffff;
    --text-bright: #ffffff;
    --text-primary: #ffffff;
    --text-pale: #dce8f7;
    --text-dim: #cfe0f5;
    --text-muted: #b9d0ec;
    --text-red: #ff9b9b;
    --text-vinst: rgb(214, 208, 190);

    /* Guld */
    --gold: #ffbb0a;
    --gold-light: #ffd400;
    --gold-dim: #c98f07;
    --gold-tint-1: rgba(255,187,10,0.10);
    --gold-tint-3: rgba(255,187,10,0.16);
    --gold-tint-5: rgba(255,187,10,0.30);
    --gold-shadow: rgba(255,187,10,0.35);

    /* Status – mörka temats värden, avstämda mot mörk bakgrund */
    --status-results: #22c55e;
    --status-ongoing: #f59e0b;
    --status-upcoming: #60a5fa;
    --status-bettable: #a78bfa;
    --status-scheduled: #9aa6bd;
    --status-winner: #f97316;
    --status-place: #84cc16;
    --status-results-tint: rgba(34,197,94,0.18);
    --status-ongoing-tint: rgba(245,158,11,0.18);
    --status-upcoming-tint: rgba(96,165,250,0.18);
    --status-bettable-tint: rgba(167,139,250,0.18);
    --status-scheduled-tint: rgba(154,166,189,0.18);
    --status-winner-tint: rgba(249,115,22,0.18);
    --status-place-tint: rgba(132,204,22,0.18);
    --danger: #f87171;
    --danger-tint: rgba(248,113,113,0.18);
    --jackpot-color: #4ade80;
    --jackpot-tint: rgba(74,222,128,0.14);
    --jackpot-border-tint: rgba(74,222,128,0.45);
    --badge-text: #0a0a0a;

    /* Lås och markeringar */
    --locked-text: #9fd4f7;
    --locked-border: #4a9edd;
    --locked-bg: rgba(74,158,221,0.18);
    --locked-checkbox-border: #8fa8cf;
    --locked-checkbox-border-checked: #ffffff;

    /* Övrigt */
    --hover-overlay-3: rgba(255,255,255,0.10);
    --popup-shadow: rgba(0,0,0,0.45);
    --popup-shadow-soft: rgba(0,0,0,0.35);
    /* Caret i select-element, samma färg som scopets --text-muted (se :root). Var vit till
       2026-10-10 och lyste då starkare än dropdown-careterna intill. */
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23b9d0ec' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}

/* Topbaren är ett snäpp ljusare än panelerna i skissen. Samma specificitet som
   blocket ovan, så den här regeln måste ligga efter det. */
[data-theme="light"] #sidebar-header,
[data-theme="light"] #top-bar
{
    --bg-dark: #004598;
    --bg-card: #004598;
}

/* --- Mörkt tema: samma uppdelning, buren av kulör ------
   Ljusa temat skiljer ram från data med ljushet – panelen #003d86 mot vita kort
   ger 10,4:1. Den separationen går inte att upprepa här: korten ligger redan på
   17 % ljushet, så vad man än gör med panelen hamnar kontrasten kring 1,1–1,3:1.
   Uppdelningen bärs därför av MÄTTNAD i stället. Dagens panel och kort låg båda
   kring 23–29 % mättnad och flöt ihop; panelen går nu till 79 % och behåller sin
   ljushet, så korten förblir det ljusaste på skärmen – viktigt i mörkt läge.

     #07203d  topbar
     #061a33  panelernas yta   (213°, 79 % mättnad, 11 % ljushet)
     #030f1f  mörkare band, panelrubriker
     #10386a  upphöjda ytor: fält, selects, knappar
     #e2b23f  guldaccent, höjd från #c9a227 för att hålla sig mot marinblått

   Kortens #1f2438 är orörd. Vill man ha mer åtskillnad är det korten som ska
   lyftas (#262c45 ger 1,27:1), inte panelen som ska sänkas. */
html:not([data-theme="light"]) #sidebar-header,
html:not([data-theme="light"]) #top-bar,
html:not([data-theme="light"]) #right-panels-wrap
{
    /* Ärvd textfärg – samma skäl som i ljusa temat: html sätter color i
       tt-base.css, och den färgen räknas ut utanför det här scopet. */
    color: var(--text-primary);

    /* Ytor */
    --bg-darkest: #07203d;
    --bg-darkest-alt: #07203d;
    --bg-dark: #061a33;
    --bg-card: #061a33;
    --bg-card-alt: #030f1f;
    --bg-mid: #10386a;
    --bg-input-alt: #10386a;

    /* Linjer */
    --border-color: var(--border-brighter);
    --border-brighter: #2a5e9b;
    --accent-border: var(--border-brighter);
    --border-soft: rgba(255,255,255,0.12);
    --border-soft-weak: rgba(255,255,255,0.07);
    --border-soft-strong: rgba(255,255,255,0.20);

    /* Text – ljusare och kallare, avstämd mot marinblått */
    --text-pale: #d7e2f2;
    --text-dim: #b7c8e2;
    --text-muted: #9ab0d0;

    /* Guld */
    --gold: #e2b23f;
    --gold-light: #f3cf6a;
    --gold-dim: #9a7a1c;
    --gold-tint-1: rgba(226,178,63,0.08);
    --gold-tint-3: rgba(226,178,63,0.14);
    --gold-tint-5: rgba(226,178,63,0.28);
    --gold-shadow: rgba(226,178,63,0.32);

    /* Lås och markeringar – lyfta för att synas mot den mörkare ytan */
    --locked-text: #9fd4f7;
    --locked-border: #3f87c4;
    --locked-bg: rgba(74,158,221,0.12);
    --locked-checkbox-border: #8094bb;

    /* Övrigt */
    --hover-overlay-3: rgba(255,255,255,0.08);
    /* Caret i select-element, samma färg som scopets --text-muted (se :root). Var vit till
       2026-10-10 och lyste då starkare än dropdown-careterna intill. */
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239ab0d0' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}

/* Topbaren ett snäpp ljusare än panelerna, som i ljusa temat. Måste ligga
   efter blocket ovan – samma specificitet. */
html:not([data-theme="light"]) #sidebar-header,
html:not([data-theme="light"]) #top-bar
{
    --bg-dark: #07203d;
    --bg-card: #07203d;
}

/* --- Montserrat ---------------------------------------
   Variabelt snitt – en fil per subset täcker vikt 100–900. Self-hostad under
   /fonts/montserrat/ precis som Font Awesome, så ingen begäran går till Google.
   Latin täcker svenska; latin-ext hämtas först när ett häst- eller kusknamn har
   tecken utanför latin-1. Licens: SIL OFL 1.1, se LICENSE.txt i mappen. */

@font-face
{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/montserrat/montserrat-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face
{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/montserrat/montserrat-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face
{
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/montserrat/montserrat-latin-wght-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face
{
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/montserrat/montserrat-latin-ext-wght-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Archivo ------------------------------------------
   Siffersnitt för hästkortets talkolumner. Montserrat saknar breddaxel och blir
   för bred i kortets tre kolumner; Archivo har axeln wdth 62-125 och körs på
   87,5 procent (--font-tal-bredd), vilket tar ned kolumnen från 216 till 204 px.
   Namn och kusk är kvar i Montserrat. Bara upprätt stil hämtas - talen är aldrig
   kursiva. Licens: SIL OFL 1.1, se LICENSE.txt i mappen. */

@font-face
{
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("/fonts/archivo/archivo-latin-wdth-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face
{
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("/fonts/archivo/archivo-latin-ext-wdth-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Override Font Awesome 7: font-display block → swap (förbättrar LCP).
   Familjenamn och vikter måste matcha solid.min.css (900) och regular.min.css (400). */
@font-face
{
    font-family: "Font Awesome 7 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/fontawesome-free-7.2.0-web/webfonts/fa-solid-900.woff2") format("woff2");
}

@font-face
{
    font-family: "Font Awesome 7 Free";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fontawesome-free-7.2.0-web/webfonts/fa-regular-400.woff2") format("woff2");
}