/* ==========================================================================
   SA ACADEMY — 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).

   Idén: guld på svart som i loggan, och glas. Bakom sidan ligger en fast
   "scen" med en bild som byts när man scrollar; innehållet flyter ovanpå i
   frostade glasskivor med guldkant.

   Två teman: mörkt (standard) och ljust. Temat sätts med data-theme på <html>;
   besökaren byter med knappen i menyn och valet sparas i webbläsaren.
   Accentfärgen kan ändras utan kod under Admin → Inställningar → Utseende.
   ========================================================================== */

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

  /* ---- Färger -------------------------------------------------------- */
  --bg:            #060606;   /* sidans botten — svart som i loggan */
  --bg-raised:     #0d0d0e;
  --surface:       #131314;   /* rutor utan glas (admin, formulärfält) */
  --surface-2:     #1c1c1e;
  --line:          rgb(255 255 255 / 0.09);
  --line-strong:   rgb(255 255 255 / 0.18);

  --text:          #f6f2e9;
  --text-muted:    #b5afa3;
  --text-dim:      #7a756c;

  --accent:        #d4ad5b;   /* loggans guld */
  --accent-hi:     #f6e3a8;   /* glansen */
  --accent-lo:     #94702c;   /* skuggan */
  --accent-text:   #e2c27a;   /* guld som text */
  --on-accent:     #120e05;   /* text på guldknappar */

  --gradient:      linear-gradient(115deg, var(--accent-lo) 0%, var(--accent) 30%, var(--accent-hi) 50%, var(--accent) 70%, var(--accent-lo) 100%);
  --gold-text:     linear-gradient(100deg, var(--accent) 0%, var(--accent-hi) 22%, color-mix(in srgb, var(--accent) 80%, var(--accent-hi)) 42%, color-mix(in srgb, var(--accent) 75%, var(--accent-lo)) 62%, var(--accent-hi) 84%, var(--accent) 100%);
  --glow:          0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
                   0 14px 50px -12px color-mix(in srgb, var(--accent) 65%, transparent);
  --shadow:        0 30px 70px -30px rgb(0 0 0 / 0.85);

  /* ---- Glas ---------------------------------------------------------- */
  --glass-bg:      linear-gradient(140deg, rgb(255 255 255 / 0.10) 0%, rgb(255 255 255 / 0.035) 45%, rgb(255 255 255 / 0.06) 100%);
  --glass-strong:  linear-gradient(140deg, rgb(22 21 19 / 0.72) 0%, rgb(12 12 12 / 0.62) 100%);
  --glass-border:  rgb(255 255 255 / 0.13);
  --glass-hi:      rgb(255 255 255 / 0.22);   /* ljuskanten upptill */
  --glass-shadow:  0 30px 60px -28px rgb(0 0 0 / 0.75);
  --glass-blur:    22px;

  /* ---- Scenen bakom glaset ------------------------------------------ */
  --veil:          rgb(6 6 6 / 0.80);         /* tonar ned bilden under innehållet */
  --shade:         linear-gradient(180deg, rgb(6 6 6 / .45) 0%, rgb(6 6 6 / .15) 40%, rgb(6 6 6 / .70) 100%);
  --orb-1:         rgb(212 173 91 / 0.30);
  --orb-2:         rgb(246 227 168 / 0.14);
  --orb-3:         rgb(148 112 44 / 0.28);

  --header-bg:     rgb(14 14 14 / 0.55);

  --success:       #4ade80;
  --danger:        #ff5a4d;
  --danger-text:   #ff8a80;

  --map-base:      #23232a;
}

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

  --bg:            #f4efe4;   /* varmt elfenben */
  --bg-raised:     #ece5d6;
  --surface:       #ffffff;
  --surface-2:     #f3eee3;
  --line:          rgb(40 30 10 / 0.10);
  --line-strong:   rgb(40 30 10 / 0.20);

  --text:          #17130b;
  --text-muted:    #5a5244;
  --text-dim:      #8d8473;

  --accent:        #c49a42;
  --accent-hi:     #ecd08a;
  --accent-lo:     #7d5c1e;
  --accent-text:   #7f5d17;   /* mörkare guld som går att läsa på ljus botten */
  --on-accent:     #120e05;

  --shadow:        0 30px 70px -34px rgb(70 50 10 / 0.35);

  --glass-bg:      linear-gradient(140deg, rgb(255 255 255 / 0.72) 0%, rgb(255 255 255 / 0.48) 50%, rgb(255 255 255 / 0.60) 100%);
  --glass-strong:  linear-gradient(140deg, rgb(255 255 255 / 0.86) 0%, rgb(255 252 245 / 0.76) 100%);
  --glass-border:  rgb(255 255 255 / 0.85);
  --glass-hi:      rgb(255 255 255 / 1);
  --glass-shadow:  0 30px 60px -32px rgb(80 60 20 / 0.35);

  --veil:          rgb(244 239 228 / 0.84);
  --orb-1:         rgb(212 173 91 / 0.35);
  --orb-2:         rgb(255 255 255 / 0.55);
  --orb-3:         rgb(196 154 66 / 0.25);

  --header-bg:     rgb(255 255 255 / 0.55);

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

:root {
  /* ---- Typsnitt ------------------------------------------------------ */
  --font-display:  'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero:       clamp(2.5rem, min(7.2vw, 11svh), 6.6rem);
  --fs-h1:         clamp(2.2rem, 5.2vw, 4.4rem);
  --fs-h2:         clamp(1.8rem, 3.8vw, 3.1rem);
  --fs-h3:         clamp(1.15rem, 1.8vw, 1.45rem);
  --fs-lead:       clamp(1.06rem, 1.45vw, 1.24rem);
  --fs-body:       1.03rem;
  --fs-small:      0.9rem;
  --fs-eyebrow:    0.74rem;

  --lh-tight:      1.04;
  --lh-body:       1.7;

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

  --radius:        22px;
  --radius-sm:     12px;
  --radius-lg:     32px;

  --header-h:      84px;

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