/* ---------------------------------------------------------------------------
   Design tokens — IdeFA Live.

   Kilde: designsystemet i .claude/skills/idefa-live-design/ (tokens/*.css).
   Handoff'en siger at netop tokens skal loeftes ordret, og det er gjort — med tre
   bevidste afvigelser, som staar dokumenteret hvor de forekommer:

     1. Fontene er self-hostede i stedet for hentet fra Googles CDN.
     2. Moerkt tema virker BAADE efter systemets indstilling og via .theme-dark.
     3. De ni @import-filer er samlet i én fil.

   Alt herunder er variabler. Ingen selektorer, ingen komponenter — dem holder
   app.css og viewer.css. Filen kan derfor laeses som specifikationen for hvordan
   fladen ser ud, uafhaengigt af hvordan den er bygget.
   --------------------------------------------------------------------------- */

/* --- Fonte ----------------------------------------------------------------

   Self-hostede. Designet foreslaar Googles CDN, men embed'en ligger paa KUNDENS
   side, og den maa ikke begynde at sende requests til Google for hver laeser.
   Baggrund og licens: assets/fonts/README.md

   font-display: swap — teksten skal vaere laesbar fra foerste frame. En reporter
   der venter paa en font, er en reporter der ikke kan skrive.
   ------------------------------------------------------------------------- */

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 800; /* variabel — hele spaendet i én fil */
    font-display: swap;
    src: url("/assets/fonts/archivo-latin.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: 400 800;
    font-display: swap;
    src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
    /* Udenlandske spillernavne: et polsk Ł ligger her, ikke i latin. */
    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: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/jetbrains-mono-latin.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: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/jetbrains-mono-latin-ext.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;
}

:root {
    --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* --- Farveramper — uafhaengige af lyst/moerkt -------------------------- */

    /* Ink: naesten-sort sportsredaktion. */
    --ink-1000: #050607;
    --ink-950: #0a0b0d;
    --ink-900: #101216;
    --ink-850: #16191f;
    --ink-800: #1d2129;
    --ink-750: #232833;
    --ink-700: #2a2f3a;
    --ink-600: #3a4150;
    --ink-500: #4e5666;
    --ink-400: #6b7484;
    --ink-300: #8d96a6;
    --ink-200: #b6bdc9;
    --ink-100: #dde2ea;
    --ink-050: #f2f4f8;
    --paper: #ffffff;

    /* Lime er den ENESTE accent. Aldrig tekst paa lys bund — den baerer ikke
       kontrast. Den er fyld (minutchip, aktiv pille), en 3px streg, eller en
       2px understregning. */
    --lime-700: #8fbb19;
    --lime-600: #a8d62f;
    --lime-500: #c6f24e;
    --lime-400: #d8f97e;
    --lime-200: #e9fcb8;
    --lime-tint: rgba(198, 242, 78, 0.14);
    --lime-tint-strong: rgba(198, 242, 78, 0.24);

    /* Roed betyder LIVE. Reserveret til live-status, fastholdte indlaeg og
       destruktive handlinger. Aldrig en flade, aldrig en linkfarve, aldrig pynt. */
    --red-700: #b4162a;
    --red-600: #d41f33;
    --red-500: #f2384b;
    --red-100: #ffd7dc;
    --red-050: #ffecef;
    --red-tint: rgba(242, 56, 75, 0.16);

    --green-500: #3ecf8e;
    --amber-500: #f5b544;
    --blue-500: #4c9bff;

    /* --- Semantiske aliaser: LYST (default) ------------------------------- */

    --bg-app: #fbfbf8;
    --bg-surface: #ffffff;
    --bg-raised: #f4f6f9;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: rgba(10, 11, 13, 0.04);
    --bg-active: rgba(10, 11, 13, 0.07);
    --bg-selected: rgba(198, 242, 78, 0.28);

    --text-primary: var(--ink-950);
    --text-body: var(--ink-850);
    --text-muted: var(--ink-500);
    --text-faint: var(--ink-400);
    --text-inverse: #ffffff;
    --text-accent: var(--ink-850);
    --text-live: var(--red-600);
    --link-fg: var(--ink-850);
    --link-fg-hover: var(--ink-950);
    --link-underline: var(--lime-600);

    --border-subtle: #e7eaf0;
    --border-default: #d7dce5;
    --border-strong: #b6bdc9;
    --border-accent: var(--lime-600);
    --border-focus: var(--ink-950);

    --action-primary-bg: var(--ink-950);
    --action-primary-fg: #ffffff;
    --action-primary-bg-hover: var(--ink-800);
    --action-primary-bg-active: var(--ink-700);
    --action-secondary-bg: #f2f4f8;
    --action-secondary-fg: var(--ink-900);
    --action-danger-bg: var(--red-600);
    --action-danger-fg: #ffffff;

    --status-live-bg: var(--red-600);
    --status-live-fg: #ffffff;
    --status-scheduled-bg: #f2f4f8;
    --status-scheduled-fg: var(--ink-500);
    --status-ended-bg: transparent;
    --status-ended-fg: var(--ink-400);

    --minute-bg: var(--ink-950);
    --minute-fg: var(--lime-500);
    --minute-pinned-bg: var(--red-600);
    --minute-pinned-fg: #ffffff;

    /* Groen og gul som TEKST paa lys bund. Designets --green-500 er en lys mint,
       der er tiltaenkt fyld; som tekst paa hvidt naar den ikke AA-kontrast, og
       flashbeskeder er netop tekst. Derfor egne, moerkere varianter. */
    --ok-fg: #0f6d3f;
    --ok-bg: #e7f5ed;
    --warn-fg: #7a4b00;
    --warn-bg: #fdf3e0;

    /* Roed som BESKED er ikke det samme som roed som knap. En fejlbesked er tekst
       paa en toenet flade og skal vende med temaet; en sletteknap er en roed flade
       med hvid tekst og skal blive roed. Derfor to saet. */
    --err-fg: var(--red-700);
    --err-bg: var(--red-050);

    /* Toner til et indlaegs baggrund efter dets maerke. Svage med vilje: de skal
       kunne ses paa et blik i en lang liste uden at teksten bliver svaerere at
       laese, og de laegges som et LAG oven paa kortets farve — ikke i stedet for.

       Groen og ikke lime til maal: lime er allerede fremhaevet-tonen, og to
       gulgroenne toner ved siden af hinanden kan ikke skelnes. Mintgroen ligger
       tydeligt et andet sted paa farvehjulet. */
    --marker-goal-bg: rgba(62, 207, 142, 0.16);
    --marker-penalty-bg: rgba(242, 56, 75, 0.13);

    /* --- Typografi -------------------------------------------------------- */

    --text-display-size: 44px;
    --text-display-lh: 1.02;
    --text-display-ls: -0.024em;
    --text-display-weight: 800;

    --text-h1-size: 32px;
    --text-h1-lh: 1.08;
    --text-h1-ls: -0.02em;
    --text-h1-weight: 800;

    --text-h2-size: 24px;
    --text-h2-lh: 1.14;
    --text-h2-ls: -0.016em;
    --text-h2-weight: 750;

    --text-h3-size: 19px;
    --text-h3-lh: 1.25;
    --text-h3-ls: -0.012em;
    --text-h3-weight: 700;

    --text-body-size: 16px;
    --text-body-lh: 1.55;
    --text-body-ls: -0.004em;
    --text-body-weight: 400;

    --text-body-sm-size: 14px;
    --text-body-sm-lh: 1.5;
    --text-body-sm-ls: 0;
    --text-body-sm-weight: 400;

    --text-label-size: 13px;
    --text-label-lh: 1.3;
    --text-label-ls: 0.01em;
    --text-label-weight: 650;

    --text-eyebrow-size: 11px;
    --text-eyebrow-lh: 1.2;
    --text-eyebrow-ls: 0.14em;
    --text-eyebrow-weight: 750;

    --text-meta-size: 12px;
    --text-meta-lh: 1.35;
    --text-meta-ls: 0.005em;
    --text-meta-weight: 500;

    --text-minute-size: 13px;
    --text-minute-lh: 1;
    --text-minute-ls: 0.02em;
    --text-minute-weight: 700;

    /* --- Afstande, bredder, kontrolhoejder -------------------------------- */

    --space-0: 0px;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-5: 12px;
    --space-6: 16px;
    --space-7: 20px;
    --space-8: 24px;
    --space-9: 32px;
    --space-10: 40px;
    --space-11: 56px;
    --space-12: 72px;
    --space-13: 96px;

    --gutter-page: 24px;
    --width-content: 820px;
    --width-feed: 720px;
    --width-form: 560px;

    --control-h-sm: 32px;
    --control-h-md: 40px;
    --control-h-lg: 48px;

    /* --- Radius og streger ------------------------------------------------ */

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;
    --border-width: 1px;
    --border-width-strong: 2px;
    --rule-live: 3px;

    /* --- Skygger ----------------------------------------------------------
       Kort har INGEN skygge — de er border-first: 1px --border-subtle paa en
       flade et trin lysere. Skygger findes kun til lag der svaever. */

    --shadow-none: none;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.36);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
    --shadow-live: 0 0 0 4px rgba(242, 56, 75, 0.18);
    --shadow-focus: 0 0 0 3px rgba(198, 242, 78, 0.55), 0 0 0 1px var(--ink-950);
    --shadow-light-sm: 0 1px 2px rgba(16, 18, 22, 0.06);
    --shadow-light-md: 0 4px 16px rgba(16, 18, 22, 0.08);

    /* --- Bevaegelse ------------------------------------------------------- */

    --dur-instant: 80ms;
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 420ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
    --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
    --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);

    /* --- Breakpoints og tap-target ---------------------------------------- */


    /* (--icon-penalty og --icon-goal er fjernet 2026-08-18: ikonerne blev droppet,
       og farven alene baerer maerket. To ubrugte data-URIer paa 2 KB i en fil hver
       side henter, er ikke noget at gemme paa.) */

    --bp-sm: 640px;
    --bp-md: 900px;
    --tap-min: 44px;
}

/* --- Moerkt tema -----------------------------------------------------------

   Designet definerer moerkt som OPT-IN via .theme-dark. Det er rigtigt for
   embed'en: den skal foelge vaertssidens valg, ikke laeserens telefon.

   Men admin fulgte allerede systemets indstilling, og det skal den blive ved med.
   En reporter paa et stadion om aftenen har telefonen i moerk tilstand, og en
   lysende hvid flade i haanden er baade ubehagelig og daarligere at laese.

   Derfor gaelder paletten to steder. Paletten staar med vilje TO GANGE frem for
   at blive skrevet om til light-dark(): den CSS-funktion loeser det elegant, men
   falder haardt igennem paa aeldre iPhones — en variabel bliver da helt udefineret,
   og fladen braekker. En reporter moeder op med den telefon de har.

   AEndres den ene blok, skal den anden aendres med. */

.theme-light {
    color-scheme: light;
}

.theme-dark {
    color-scheme: dark;

    --bg-app: var(--ink-950);
    --bg-surface: var(--ink-900);
    --bg-raised: var(--ink-850);
    --bg-card: var(--ink-850);
    --bg-input: var(--ink-900);
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-active: rgba(255, 255, 255, 0.09);
    --bg-selected: var(--lime-tint);

    --text-primary: var(--ink-050);
    --text-body: var(--ink-100);
    --text-muted: var(--ink-300);
    --text-faint: var(--ink-400);
    --text-inverse: var(--ink-950);
    --text-accent: var(--lime-500);
    --text-live: var(--red-500);
    --link-fg: var(--lime-500);
    --link-fg-hover: var(--lime-400);
    --link-underline: var(--lime-500);

    --border-subtle: var(--ink-800);
    --border-default: var(--ink-700);
    --border-strong: var(--ink-600);
    --border-accent: var(--lime-500);
    --border-focus: var(--lime-500);

    --action-primary-bg: var(--lime-500);
    --action-primary-fg: var(--ink-950);
    --action-primary-bg-hover: var(--lime-400);
    --action-primary-bg-active: var(--lime-600);
    --action-secondary-bg: var(--ink-800);
    --action-secondary-fg: var(--ink-050);

    --status-scheduled-bg: var(--ink-750);
    --status-scheduled-fg: var(--ink-200);

    --minute-bg: var(--lime-500);
    --minute-fg: var(--ink-950);

    --ok-fg: #7ee0a8;
    --ok-bg: #14301f;
    --warn-fg: #f5b544;
    --warn-bg: #33260c;
    --err-fg: var(--red-500);
    --err-bg: var(--red-tint);
}

@media (prefers-color-scheme: dark) {
    /* :not(.theme-light) — saetter en vaertsside udtrykkeligt lyst tema, vinder det
       over telefonens indstilling. */
    :root:not(.theme-light) {
        color-scheme: dark;

        --bg-app: var(--ink-950);
        --bg-surface: var(--ink-900);
        --bg-raised: var(--ink-850);
        --bg-card: var(--ink-850);
        --bg-input: var(--ink-900);
        --bg-hover: rgba(255, 255, 255, 0.05);
        --bg-active: rgba(255, 255, 255, 0.09);
        --bg-selected: var(--lime-tint);

        --text-primary: var(--ink-050);
        --text-body: var(--ink-100);
        --text-muted: var(--ink-300);
        --text-faint: var(--ink-400);
        --text-inverse: var(--ink-950);
        --text-accent: var(--lime-500);
        --text-live: var(--red-500);
        --link-fg: var(--lime-500);
        --link-fg-hover: var(--lime-400);
        --link-underline: var(--lime-500);

        --border-subtle: var(--ink-800);
        --border-default: var(--ink-700);
        --border-strong: var(--ink-600);
        --border-accent: var(--lime-500);
        --border-focus: var(--lime-500);

        --action-primary-bg: var(--lime-500);
        --action-primary-fg: var(--ink-950);
        --action-primary-bg-hover: var(--lime-400);
        --action-primary-bg-active: var(--lime-600);
        --action-secondary-bg: var(--ink-800);
        --action-secondary-fg: var(--ink-050);

        --status-scheduled-bg: var(--ink-750);
        --status-scheduled-fg: var(--ink-200);

        --minute-bg: var(--lime-500);
        --minute-fg: var(--ink-950);

        --ok-fg: #7ee0a8;
        --ok-bg: #14301f;
        --warn-fg: #f5b544;
        --warn-bg: #33260c;
    }
}

/* --- Telefon --------------------------------------------------------------

   Mobilen er designmaalet, desktop er den samme flade gjort bredere. Kontroller
   vokser til 44px, gutteren strammes, og de store skriftstoerrelser saettes ned.
   Komponenter der laeser disse tokens tilpasser sig af sig selv. */

@media (max-width: 640px) {
    :root {
        --gutter-page: 16px;
        --control-h-sm: 44px;
        --control-h-md: 44px;
        --control-h-lg: 52px;
        --text-display-size: 32px;
        --text-h1-size: 26px;
        --text-h2-size: 21px;
        --text-h3-size: 18px;
        --space-8: 20px;
        --space-9: 24px;
        --space-11: 40px;
    }
}

/* --- Animationer ---------------------------------------------------------

   Kun to loebende animationer findes, og kun én maa vaere paa skaermen ad gangen:
   live-pulse (prikken) og flash-new (limetone der toner af et nyt indlaeg).
   Ingen bounces, ingen sideovergange. */

@keyframes live-pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(0.82);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes post-enter {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes flash-new {
    0% {
        background: var(--lime-tint-strong);
    }
    100% {
        background: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}