/* =============================================================================
   friluftslivet.nu — Designtokens (utvecklings-fas 1)
   Riktning: "Skymning vid lägret" (alpenglow / blå timme).
   Paletten är destillerad direkt ur den godkända header-scenen
   (utsiktsskymning v3): djup skymningsindigo som bas, eldglöd-bärnsten som
   signaturaccent, fjälldis som luftiga neutraler. Distinkt friluftskänsla,
   inte ljum AI-grått.

   Allt är namespace:at (--fl-*) och klasser prefixas .fl- så det inte krockar
   när det blir blocktema-komponenter (header.php / menu.php / footer.php).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     RÅA FÄRGER (palettens DNA — hämtade ur header-scenen)
     Namnges efter naturfenomen, inte efter funktion, så paletten har karaktär.
     ------------------------------------------------------------------------ */

  /* Skymning / natthimmel — basens djup */
  --fl-natt:        #070a14;  /* nästan svart, scenens bakgrund */
  --fl-skymning:    #0a0f24;  /* djup indigo (toppen av himlen) */
  --fl-skymning-2:  #141a2e;  /* förgrundsås */
  --fl-indigo:      #1b2440;  /* arbetshäst för mörka ytor */
  --fl-indigo-2:    #243156;  /* upphöjda mörka ytor */

  /* Fjäll / bergsridåer (atmosfäriskt perspektiv) */
  --fl-fjall-djup:  #2b3257;  /* närmaste ås */
  --fl-fjall:       #414a72;  /* mellanås */
  --fl-fjall-ljus:  #565d88;  /* bortre ås, blånar bort */
  --fl-dis:         #8a93b4;  /* daldimma, dämpad blågrå */
  --fl-dis-ljus:    #c7d2ea;  /* ljus dis / mist */

  /* Eldglöd — signaturaccenten (det folk kommer minnas) */
  --fl-glod-djup:   #7e3414;  /* glödbädd, mörk botten */
  --fl-eld:         #e8702a;  /* primär eld-orange */
  --fl-eld-ljus:    #f7972f;  /* ljusare låga */
  --fl-barnsten:    #f7b13e;  /* bärnsten, varm mellanton */
  --fl-glod:        #ffce6b;  /* glöd, ljus */
  --fl-gnista:      #ffe6a6;  /* gnista / dörröppningens sken */

  /* Sval kontrastaccent — teal, lånad från sjö/is (sekundär accent) */
  --fl-sjo:         #2e6f6a;  /* mörk tallgrön-teal */
  --fl-sjo-ljus:    #3f8f86;  /* hover */
  --fl-mossa:       #5c7a4a;  /* dämpad mossgrön, sekundär naturaccent */

  /* Skog & gräs — grön naturnyans (träd/gräs) */
  --fl-trad:        #2f5d3a;  /* djup grangrön, träd/barrskog */
  --fl-trad-djup:   #1f4a2c;  /* mörk skog, djupa partier */
  --fl-gras:        #6f9352;  /* ljusare gräs-/ängsgrön */

  /* Sjöblå — för brödtextlänkar (blå-isch) */
  --fl-bla:         #1f5fb0;  /* klar blå, AA mot snö */
  --fl-bla-djup:    #163e7d;  /* hover i ljust läge */
  --fl-bla-ljus:    #7fb4ff;  /* ljus blå för länkar på mörkt */

  /* Papper / ljusa neutraler — varma, inte kliniskt vita */
  --fl-sno:         #f6f4ee;  /* varmvit, ljust läges bakgrund */
  --fl-papper:      #efe9dd;  /* ljus varm panel */
  --fl-lin:         #e3dccd;  /* kantlinjer i ljust läge */
  --fl-sten:        #9a9384;  /* dämpad varmgrå text/sekundär */

  /* Status (säkerhetsrelevant innehåll: väder, kyla, vatten) */
  --fl-fara:        #c8472f;  /* varning/risk — varm röd, ej AI-rosa */
  --fl-akta:        #d99a2b;  /* obs/akta — bärnstensgul */
  --fl-trygg:       #3f8f6a;  /* ok/trygg — naturgrön */

  /* ===========================================================================
     SEMANTISKA TOKENS — LJUST LÄGE (default)
     UI:t hänvisar ALLTID till dessa, aldrig till råfärgerna direkt.
     ======================================================================== */

  /* Ytor */
  --fl-bg:           var(--fl-sno);        /* sidans bakgrund */
  --fl-bg-mjuk:      var(--fl-papper);     /* avvikande sektion */
  --fl-bg-upphojd:   #ffffff;              /* kort/paneler */
  --fl-bg-panel:     #fbf9f3;              /* varm panel/dropdown (ej kliniskt vit) */
  --fl-bg-invers:    var(--fl-skymning);   /* mörka sektioner i ljust läge (footer, hero) */

  /* Text */
  --fl-text:         #1c2030;              /* brödtext — varm mörk indigo, ej ren svart */
  --fl-text-mjuk:    #4a4f60;              /* sekundär text */
  --fl-text-svag:    #5f6378;              /* metadata, captions (AA mot snö) */
  --fl-text-invers:  var(--fl-sno);        /* text på mörk yta */

  /* Linjer & ramar */
  --fl-linje:        var(--fl-lin);
  --fl-linje-stark:  #cabfa8;

  /* Accenter (interaktion) */
  --fl-accent:        var(--fl-eld);        /* primär CTA / aktiv markör */
  --fl-accent-hover:  #d4631f;
  --fl-accent-mjuk:   #fbe3c4;              /* accent-tonad yta (hover-bakgrund) */
  --fl-lank:          var(--fl-bla);        /* brödtextlänkar — blå-isch */
  --fl-lank-hover:    var(--fl-bla-djup);
  --fl-kicker-farg:   #a8430f;              /* rost: eld-accent men AA-läsbar mot ljus yta */

  /* Fokusring (tillgänglighet) — alltid synlig, hög kontrast */
  --fl-fokus:         #1d5fb8;              /* tydlig blå, syns mot både varmt & mörkt */
  --fl-fokus-invers:  var(--fl-glod);

  /* Header-specifikt: alfa-toner för transparent-över-hero-läget */
  --fl-header-h:        112px;                      /* total höjd: topp-rad (logo/sök/konto) + nav-rad */
  --fl-header-h-scroll: 56px;                       /* (oanvänd sedan tvåradslayouten) */
  --fl-header-glas:     rgba(10, 15, 36, 0.32);     /* slöja i transparent-läge */
  --fl-header-solid:    rgba(10, 15, 36, 0.94);     /* solid vid scroll */
  --fl-header-blur:     8px;
  --fl-header-text:     var(--fl-sno);              /* header-text är alltid ljus (ligger på mörkt) */

  /* ===========================================================================
     TYPOGRAFI
     Rubriker (display): "Bricolage Grotesque" — karaktärsfull, lite oregelbunden
     grotesk med friluftskänsla (inte Inter/Space Grotesk), ger kontrast.
     Brödtext + UI: "Open Sans" — vänligt, runt och superläsbart (Fredriks val).
     Båda via Google Fonts (CSS-only, ingen build). Systemfonts som fallback.
     ======================================================================== */
  --fl-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --fl-font-brod:    "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fl-font-ui:      "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fl-font-mono:    "Cascadia Code", ui-monospace, "SF Mono", Menlo, monospace;

  /* Typskala — modulär (1.250, major third), basläsbarhet 18px */
  --fl-text-xs:   0.75rem;    /* 12 */
  --fl-text-sm:   0.875rem;   /* 14 */
  --fl-text-base: 1.125rem;   /* 18 — brödtext, generös läsbarhet */
  --fl-text-md:   1.25rem;    /* 20 */
  --fl-text-lg:   1.563rem;   /* 25 */
  --fl-text-xl:   1.953rem;   /* 31 */
  --fl-text-2xl:  2.441rem;   /* 39 */
  --fl-text-3xl:  3.052rem;   /* 49 */
  --fl-text-4xl:  3.815rem;   /* 61 — hero */

  --fl-lh-tat:    1.1;        /* rubriker */
  --fl-lh-normal: 1.35;       /* underrubriker */
  --fl-lh-brod:   1.7;        /* brödtext, luftig läsning */

  --fl-vikt-normal: 400;
  --fl-vikt-medium: 500;
  --fl-vikt-fet:    600;
  --fl-vikt-svart:  800;      /* display-rubriker */

  --fl-sparrning-rubrik: -0.02em;  /* stram display */
  --fl-sparrning-versal:  0.08em;  /* för små versaletiketter */

  /* ===========================================================================
     SPACING / LUFT — 4px-bas, men generös skala (kravet: MYCKET LUFT)
     ======================================================================== */
  --fl-luft-1:  0.25rem;   /* 4 */
  --fl-luft-2:  0.5rem;    /* 8 */
  --fl-luft-3:  0.75rem;   /* 12 */
  --fl-luft-4:  1rem;      /* 16 */
  --fl-luft-5:  1.5rem;    /* 24 */
  --fl-luft-6:  2rem;      /* 32 */
  --fl-luft-7:  3rem;      /* 48 */
  --fl-luft-8:  4rem;      /* 64 */
  --fl-luft-9:  6rem;      /* 96 */
  --fl-luft-10: 8rem;      /* 128 — sektionsandning */

  --fl-bredd-max:  1200px;       /* sidans maxbredd */
  --fl-bredd-text: 68ch;         /* optimal radlängd för brödtext */
  --fl-gutter:     clamp(1rem, 4vw, 2.5rem);

  /* ===========================================================================
     RADIER — mjuka men inte bubbliga; stramare än default-AI-runda hörn
     ======================================================================== */
  --fl-radie-sm:   4px;
  --fl-radie:      8px;
  --fl-radie-md:   12px;
  --fl-radie-lg:   18px;
  --fl-radie-pill: 999px;

  /* ===========================================================================
     ELEVATION / SKUGGOR — sparsamt (flat design). Skuggor ska kännas som
     skymningsljus, inte generiskt grått mjukt sken överallt.
     ======================================================================== */
  --fl-skugga-1: 0 1px 2px rgba(20, 26, 46, 0.06);
  --fl-skugga-2: 0 4px 14px rgba(20, 26, 46, 0.10);
  --fl-skugga-3: 0 18px 50px rgba(7, 10, 20, 0.28);
  --fl-skugga-glod: 0 6px 22px rgba(232, 112, 42, 0.28);  /* varm glöd runt CTA */

  /* ===========================================================================
     RÖRELSE
     ======================================================================== */
  --fl-tid-snabb:  120ms;
  --fl-tid:        220ms;
  --fl-tid-lugn:   420ms;
  --fl-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);   /* mjuk utgång */

  /* Lager (z-index) */
  --fl-z-header:  1000;
  --fl-z-drawer:  1100;
  --fl-z-overlay: 1090;
}

/* =============================================================================
   MÖRKT LÄGE — vrider de semantiska tokens, råfärgerna är desamma.
   Aktiveras via [data-fl-tema="morkt"] (eller prefers-color-scheme nedan).
   I mörkt läge ÄR sajten själva skymningsscenen.
   ========================================================================== */
[data-fl-tema="morkt"] {
  --fl-bg:          var(--fl-natt);
  --fl-bg-mjuk:     var(--fl-skymning);
  --fl-bg-upphojd:  var(--fl-indigo);
  --fl-bg-panel:    var(--fl-indigo);
  --fl-bg-invers:   var(--fl-sno);

  --fl-text:        #e6ebf7;
  --fl-text-mjuk:   #b3bcd6;
  --fl-text-svag:   #8a93b4;
  --fl-text-invers: #1c2030;

  --fl-linje:       rgba(199, 210, 234, 0.12);
  --fl-linje-stark: rgba(199, 210, 234, 0.22);

  --fl-accent:        var(--fl-eld-ljus);
  --fl-accent-hover:  var(--fl-barnsten);
  --fl-accent-mjuk:   rgba(232, 112, 42, 0.16);
  --fl-lank:          var(--fl-bla-ljus);   /* blå-isch, ljus mot mörkt */
  --fl-lank-hover:    #a9cdff;
  --fl-kicker-farg:   var(--fl-barnsten);   /* lyser fint mot mörkt */

  --fl-fokus:         #7fb4ff;

  --fl-header-solid:  rgba(7, 10, 20, 0.92);
  --fl-header-glas:   rgba(7, 10, 20, 0.34);

  --fl-skugga-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --fl-skugga-2: 0 6px 18px rgba(0, 0, 0, 0.5);
  --fl-skugga-3: 0 18px 50px rgba(0, 0, 0, 0.6);
}

/* Respektera OS-preferens om inget tema valts explicit */
@media (prefers-color-scheme: dark) {
  :root:not([data-fl-tema="ljust"]) {
    --fl-bg:          var(--fl-natt);
    --fl-bg-mjuk:     var(--fl-skymning);
    --fl-bg-upphojd:  var(--fl-indigo);
    --fl-bg-panel:    var(--fl-indigo);
    --fl-bg-invers:   var(--fl-sno);
    --fl-text:        #e6ebf7;
    --fl-text-mjuk:   #b3bcd6;
    --fl-text-svag:   #8a93b4;
    --fl-text-invers: #1c2030;
    --fl-linje:       rgba(199, 210, 234, 0.12);
    --fl-linje-stark: rgba(199, 210, 234, 0.22);
    --fl-accent:        var(--fl-eld-ljus);
    --fl-accent-hover:  var(--fl-barnsten);
    --fl-accent-mjuk:   rgba(232, 112, 42, 0.16);
    --fl-lank:          var(--fl-bla-ljus);
    --fl-lank-hover:    #a9cdff;
    --fl-kicker-farg:   var(--fl-barnsten);
    --fl-fokus:         #7fb4ff;
    --fl-header-solid:  rgba(7, 10, 20, 0.92);
    --fl-header-glas:   rgba(7, 10, 20, 0.34);
  }
}

/* =============================================================================
   GRUNDELEMENT — minimal reset + bastypografi byggd på tokens
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fl-bg);
  color: var(--fl-text);
  font-family: var(--fl-font-brod);
  font-size: var(--fl-text-base);
  line-height: var(--fl-lh-brod);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fl-font-display);
  font-weight: var(--fl-vikt-svart);
  line-height: var(--fl-lh-tat);
  letter-spacing: var(--fl-sparrning-rubrik);
  color: var(--fl-text);
  margin: 0 0 var(--fl-luft-4);
  text-wrap: balance;
}
h1 { font-size: var(--fl-text-3xl); }
h2 { font-size: var(--fl-text-2xl); }
h3 { font-size: var(--fl-text-xl); }
h4 { font-size: var(--fl-text-lg); }

p { margin: 0 0 var(--fl-luft-5); max-width: var(--fl-bredd-text); }

a { color: var(--fl-lank); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--fl-lank-hover); }

/* Global fokusstil — synlig, tjock, hög kontrast (WCAG 2.2) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--fl-fokus);
  outline-offset: 2px;
  border-radius: var(--fl-radie-sm);
}

/* Etikett i versaler (kicker / ögonbryn) — återkommande mönster */
.fl-kicker {
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-vikt-fet);
  letter-spacing: var(--fl-sparrning-versal);
  text-transform: uppercase;
  color: var(--fl-kicker-farg);
  display: inline-flex;
  align-items: center;
  gap: var(--fl-luft-2);
}

/* =============================================================================
   KNAPPAR & LÄNKAR (interaktion)
   ========================================================================== */
.fl-knapp {
  --_bg: var(--fl-accent);
  --_fg: #2a1402;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fl-luft-2);
  min-height: 44px;                 /* touch target */
  padding: 0.7em 1.4em;
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-base);
  font-weight: var(--fl-vikt-fet);
  line-height: 1;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid transparent;
  border-radius: var(--fl-radie-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--fl-tid-snabb) var(--fl-ease),
              box-shadow var(--fl-tid) var(--fl-ease),
              background var(--fl-tid) var(--fl-ease);
}
.fl-knapp:hover { background: var(--fl-accent-hover); color: var(--_fg); transform: translateY(-1px); box-shadow: var(--fl-skugga-glod); }
.fl-knapp:active { transform: translateY(0); }

/* Sekundär — dämpad, "linje" */
.fl-knapp--sekundar {
  --_bg: transparent;
  --_fg: var(--fl-text);
  border-color: var(--fl-linje-stark);
}
.fl-knapp--sekundar:hover { background: var(--fl-accent-mjuk); border-color: var(--fl-accent); box-shadow: none; color: var(--fl-text); }

/* På mörk yta (i header/hero) */
.fl-knapp--pa-morkt {
  --_fg: var(--fl-text-invers);
  --_bg: transparent;
  border-color: rgba(246, 244, 238, 0.45);
  color: var(--fl-header-text);
}
.fl-knapp--pa-morkt:hover { background: rgba(246, 244, 238, 0.12); border-color: rgba(246, 244, 238, 0.8); box-shadow: none; color: var(--fl-header-text); }

/* Textlänk-knapp med eld-understruken hover */
.fl-textlank {
  font-family: var(--fl-font-ui);
  font-weight: var(--fl-vikt-medium);
  color: var(--fl-text);
  text-decoration: none;
  background-image: linear-gradient(var(--fl-accent), var(--fl-accent));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--fl-tid) var(--fl-ease);
  padding-bottom: 2px;
}
.fl-textlank:hover { background-size: 100% 2px; color: var(--fl-text); }

/* Hjälpklasser */
.fl-wrap { max-width: var(--fl-bredd-max); margin-inline: auto; padding-inline: var(--fl-gutter); }
.fl-visuellt-dold {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Skip-link */
.fl-skip {
  position: absolute; left: var(--fl-luft-4); top: -100px;
  background: var(--fl-accent); color: #2a1402; padding: var(--fl-luft-3) var(--fl-luft-5);
  border-radius: var(--fl-radie); font-family: var(--fl-font-ui); font-weight: var(--fl-vikt-fet);
  z-index: 2000; transition: top var(--fl-tid) var(--fl-ease);
}
.fl-skip:focus { top: var(--fl-luft-4); color: #2a1402; }