/* ============================================================
   public_html/assets/css/tokens.css
   ============================================================
   ALLA farger, typsnitt, storlekar och avstand bor HAR. Ingen annan
   fil far innehalla en hexkod.

   RIKTNINGEN
   Varmt papper, neutralt svart blaeck, en enda skarp accent i brant
   orange. Ingen gradient nagonstans - en gradient ar oftast ett satt
   att slippa valja farg.

   TYPOGRAFIN ar systemtypsnitt, stort mot litet. Skalsprangningen
   mellan rubrik och brodtext gor jobbet som annars laggs pa kort,
   skuggor och ikoner.

   KONTRAST ar raknad, inte gissad. Vardena star vid varje token.
   ============================================================ */

:root {
    /* ALLTID LJUST. Sajten foljer inte operativsystemets morka lage -
       beslut 2026-09-12. color-scheme talar om det for webblasaren, sa
       att formularfalt, rullningslister och autofyll ocksa ritas ljusa
       i stallet for morka ovanpa ett ljust papper. */
    color-scheme: light;

    /* ── Farg: yta ─────────────────────────────────────────────
       Papperet ar varmt (ett stick gult), inte kalvitt. Det ar det som
       gor att sidan last som tryck och inte som ett granssnitt. */
    --papper:        #f5f2ec;
    --papper-ren:    #fffdf8;   /* lyft yta, t.ex. sticky-huvudet */
    --yta:           #ebe7de;   /* svag panel */
    --yta-2:         #e0dbd0;   /* aktiv rad */
    --kant:          #d5cfc2;   /* harfin linje mot papper */
    --kant-stark:    #111111;   /* strukturlinjer ar BLACK, inte gra */

    /* ── Farg: text ────────────────────────────────────────────
       Neutralt svart blaeck, utan fargton. Valt 2026-09-12 efter att ha
       jamforts mot ett grongront svart pa riktiga sidor: det rena svarta
       later det varma papperet och den orange accenten bara skillnaden
       mellan dem, i stallet for att en tredje ton blandar sig i. */
    --black:         #111111;   /* 18.1:1 mot papper - rubriker */
    --text:          #2a2a2a;   /* 12.8:1 - brodtext */
    --text-dim:      #5e5e5e;   /*  5.8:1 - sekundart, klarar AA */
    --text-svag:     #858585;   /*  3.3:1 - BARA stora tal och dekor */

    /* ── Farg: accent ──────────────────────────────────────────
       EN accent. Anvands till linjer, siffror och understrykningar -
       aldrig som yta bakom sma texter.

       --accent      3.4:1 mot papper. Godkant for grafik och stor
                     text, INTE for brodtext. Dar anvands --accent-djup.
       --accent-djup 4.6:1 mot papper, och papper pa den ar 4.6:1 -
                     alltsa AA bade som text och som knappyta. */
    --accent:        #e4522b;
    --accent-djup:   #c1401c;
    --accent-svag:   #f6e3d9;   /* markering bakom text */
    --pa-accent:     #fffdf8;

    /* ── Farg: status ──────────────────────────────────────────
       Felrott ar medvetet en annan kulor an accenten, sa att ett fel
       aldrig kan forvaxlas med en knapp. */
    --fel:           #a3231b;
    --fel-yta:       #f7e4e2;
    --ok:            #1f6b45;
    --ok-yta:        #e2efe7;
    --varning:       #7a5200;
    --varning-yta:   #f6ecd9;

    /* ── Typografi ─────────────────────────────────────────────
       SYSTEMTYPSNITT, beslut 2026-09-12: inga nedladdade webbtypsnitt
       alls. Varje plattform far sitt eget granssnittstypsnitt - noll
       byte att ladda och ingen blink nar ett typsnitt byts in. EN
       variabel; den satts pa body i base.css och allt annat arver. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Skalan ar avsiktligt SPRUCKEN: 1rem brodtext mot upp till 7rem
       rubrik. Ett jamnt modulskal ger jamn gra sida. */
    --tx-xs:   0.75rem;
    --tx-sm:   0.875rem;
    --tx-bas:  1.0625rem;      /* 17px */
    --tx-lg:   1.25rem;
    --tx-xl:   1.5rem;
    --tx-2xl:  clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    --tx-3xl:  clamp(2.8rem, 1.4rem + 6.2vw, 7rem);   /* hero */

    --vikt-normal:  400;
    --vikt-medium:  500;
    --vikt-halvfet: 600;

    --radavstand:      1.6;
    --radavstand-tat:  1.05;   /* display-rubriker far sitta tatt */

    /* ── Avstand ───────────────────────────────────────────────
       Bygger pa 8px, med tva riktigt stora steg. Vitytan ska vara
       obekvamt stor pa fa stallen i stallet for lagom overallt. */
    --s-1:  0.25rem;
    --s-2:  0.5rem;
    --s-3:  0.75rem;
    --s-4:  1rem;
    --s-5:  1.5rem;
    --s-6:  2rem;
    --s-7:  3.5rem;
    --s-8:  6rem;
    --s-9:  9rem;

    /* ── Rutnat och matt ───────────────────────────────────────
       Tolv kolumner. Innehallet sitter pa 1-8 eller 9-12 - aldrig
       centrerat, aldrig tre lika breda. */
    --bredd:       78rem;
    --bredd-smal:  42rem;    /* ca 68 tecken */
    --sidmarginal: clamp(1.25rem, 4.5vw, 4.5rem);
    --gutter:      clamp(1.5rem, 3vw, 3rem);

    /* ── Ovrigt ────────────────────────────────────────────────
       Radien ar 0. Rundade horn ar det snabbaste sattet att fa en
       sida att se ut som alla andra. */
    --radie:      0;
    --linje:      1px solid var(--kant);
    --linje-black: 1px solid var(--black);
    --linje-tung:  3px solid var(--black);
    --fokus:      2px solid var(--accent-djup);

}