/* =====================================================
   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;
    --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;
    --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: '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;
    /* --- Delade tokens (samma i båda teman) ------------ */
    --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='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    --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);
    /* --- Loppnummer i kolumnhuvud --------------------- */
    --nr-bg: linear-gradient(135deg, #37375f, #130e38);
    --nr-color: #bcc5da;
    --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%);
}

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

/* --- Ljust tema --------------------------------------- */
[data-theme="light"]
{
    --bg-darkest: #f4f5f9;
    --bg-darkest-alt: #e7eaf3;
    --bg-dark: #ffffff;
    --bg-mid: #eef0f6;
    --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;
    --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;
    --nr-bg: linear-gradient(135deg, #bcc5ee, #5b5f81);
    --nr-color: #f1f2f5;
    --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%);
}

/* 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");
}