/* ==========================================================================
   FUTURES DREAMS — DESIGNVARIABLER
   Allt utseende utgår härifrån: ändra en färg, ett typsnitt eller ett avstånd
   här så slår det igenom på hela sajten (och i admin).

   Två teman: mörkt (standard, som affischerna — svart och guld) och ljust.
   Temat sätts med data-theme="dark|light" på <html>; besökaren byter med
   knappen i menyn och valet sparas i webbläsaren.

   Accentfärgen kan även ändras utan kod under
   Admin → Inställningar → Utseende (den skriver över --accent nedan).
   ========================================================================== */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* ---- Färger -------------------------------------------------------- */
  --bg:            #070708;   /* sidans bakgrund — nästan svart */
  --bg-raised:     #0e0e10;   /* sektioner som ska lyftas en aning */
  --surface:       #141416;   /* kort och rutor */
  --surface-2:     #1d1d21;   /* hover, inmatningsfält */
  --line:          rgb(255 255 255 / 0.08);
  --line-strong:   rgb(255 255 255 / 0.17);

  --text:          #f7f5ef;
  --text-muted:    #aaa79f;
  --text-dim:      #6f6c66;

  --accent:        #f5b70a;   /* guld — knappar, länkar, glöd */
  --accent-hi:     #ffe27a;   /* guldets ljusa glans */
  --accent-lo:     #b97c00;   /* guldets mörka kant */
  --accent-text:   var(--accent);   /* guld som text (mörkare i ljust tema) */
  --on-accent:     #0b0a07;   /* text på guldknappar */
  --turf:          #1f6b3a;   /* gräsgrönt — sparsamt, i planlinjer och detaljer */
  --chalk:         rgb(255 255 255 / 0.85);  /* kritvita planlinjer */

  --gradient:      linear-gradient(100deg, var(--accent-hi) 0%, var(--accent) 38%, var(--accent-lo) 100%);
  --gold-text:     linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 45%, var(--accent-lo) 100%);
  --glow:          0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
                   0 12px 44px -10px color-mix(in srgb, var(--accent) 60%, transparent);
  --shadow:        0 24px 60px -24px rgb(0 0 0 / 0.75);
  --hero-shade:    linear-gradient(180deg, rgb(7 7 8 / .55) 0%, rgb(7 7 8 / .25) 35%, rgb(7 7 8 / .75) 78%, var(--bg) 100%);
  --header-bg:     color-mix(in srgb, var(--bg) 80%, transparent);

  --success:       #3ddc84;
  --danger:        #ff5a4d;
  --danger-text:   #ff8a80;

  --map-base:      #23232a;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #f6f4ee;   /* varm off-white, som kritad linje på papper */
  --bg-raised:     #eeebe2;
  --surface:       #ffffff;
  --surface-2:     #f1eee6;
  --line:          rgb(20 18 10 / 0.09);
  --line-strong:   rgb(20 18 10 / 0.18);

  --text:          #121110;
  --text-muted:    #57544d;
  --text-dim:      #8c887e;

  --accent:        #f0ad00;
  --accent-hi:     #ffd54a;
  --accent-lo:     #a86f00;
  --accent-text:   #8a5a00;   /* mörkare guld som går att läsa på ljus botten */
  --on-accent:     #0b0a07;
  --turf:          #1f7a3f;
  --chalk:         rgb(18 17 16 / 0.75);

  --shadow:        0 24px 60px -28px rgb(60 45 10 / 0.35);
  --hero-shade:    linear-gradient(180deg, rgb(7 7 8 / .55) 0%, rgb(7 7 8 / .2) 35%, rgb(7 7 8 / .55) 75%, var(--bg) 100%);
  --header-bg:     color-mix(in srgb, var(--bg) 86%, transparent);

  --danger-text:   #b3261e;
  --map-base:      #dcd8cd;
}

:root {
  /* ---- Typsnitt ------------------------------------------------------ */
  --font-display:  'Archivo', 'Arial Black', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-stretch: 125%;    /* breda rubriker som på affischerna */

  --fs-hero:       clamp(2.9rem, min(9vw, 13svh), 8.2rem);
  --fs-h1:         clamp(2.4rem, 6vw, 5rem);
  --fs-h2:         clamp(1.9rem, 4.2vw, 3.4rem);
  --fs-h3:         clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead:       clamp(1.08rem, 1.5vw, 1.25rem);
  --fs-body:       1.03rem;
  --fs-small:      0.9rem;
  --fs-eyebrow:    0.78rem;

  --lh-tight:      0.95;
  --lh-body:       1.65;

  /* ---- Mått och avstånd --------------------------------------------- */
  --container:     1240px;
  --container-narrow: 760px;
  --gutter:        clamp(1rem, 4vw, 2.5rem);
  --section-y:     clamp(4rem, 9vw, 7.5rem);
  --gap:           clamp(1rem, 2.4vw, 1.75rem);

  --radius:        16px;
  --radius-sm:     10px;
  --radius-lg:     26px;

  --header-h:      76px;

  /* ---- Rörelse ------------------------------------------------------- */
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
  --dur-fast:      .18s;
  --dur:           .45s;
  --dur-slow:      .95s;
}