/* ==========================================================================
   CAFÉ RISÄNGEN — 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: ett varmt, lugnt café. Krämvitt papper, espressobrun text och
   honungsgult från loggan som accent. Ljust tema är standard; mörkt tema är
   "kvällscaféet" — samma honung på mörk espresso.

   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="light"] {
  color-scheme: light;

  /* ---- Färger -------------------------------------------------------- */
  --bg:            #f7f1e6;   /* varmt papper */
  --bg-raised:     #efe6d6;
  --surface:       #fffdf8;   /* kort och rutor */
  --surface-2:     #f3ebdd;
  --line:          rgb(70 45 20 / 0.10);
  --line-strong:   rgb(70 45 20 / 0.22);

  --text:          #2a1f17;   /* espresso */
  --text-muted:    #6b5d50;
  --text-dim:      #9a8c7c;

  --accent:        #c9931c;   /* honung — från loggans gula */
  --accent-hi:     #f0c24b;
  --accent-lo:     #8a6210;
  --accent-text:   #8a6210;   /* honung som går att läsa på papper */
  --accent-soft:   rgb(201 147 28 / 0.12);
  --on-accent:     #2a1f17;

  --green:         #5f7a52;   /* salvia — för "öppet" och vegetariskt */
  --green-soft:    rgb(95 122 82 / 0.14);

  --shadow:        0 24px 60px -28px rgb(60 35 10 / 0.35);
  --shadow-sm:     0 6px 20px -10px rgb(60 35 10 / 0.25);
  --card-bg:       var(--surface);
  --card-border:   rgb(70 45 20 / 0.08);
  --header-bg:     rgb(247 241 230 / 0.82);

  --success:       #3f8f4e;
  --danger:        #c4402f;
  --danger-text:   #a3301f;

  --map-base:      #e4dccb;

  /* Används av admin (samma motor som saac) */
  --accent-2:      var(--green);
  --gradient:      linear-gradient(135deg, var(--accent-hi), var(--accent) 55%, color-mix(in srgb, var(--accent) 85%, var(--accent-lo)));
  --glow:          0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 12px 40px -12px color-mix(in srgb, var(--accent) 60%, transparent);
}

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

  --bg:            #1c1512;   /* mörk espresso */
  --bg-raised:     #241c18;
  --surface:       #2a211c;
  --surface-2:     #352a24;
  --line:          rgb(255 240 220 / 0.10);
  --line-strong:   rgb(255 240 220 / 0.22);

  --text:          #f3eadb;
  --text-muted:    #b9aa99;
  --text-dim:      #857766;

  --accent:        #e0a62a;
  --accent-hi:     #f5cd63;
  --accent-lo:     #a7751a;
  --accent-text:   #f0bf52;
  --accent-soft:   rgb(224 166 42 / 0.16);
  --on-accent:     #1c1512;

  --green:         #8db07d;
  --green-soft:    rgb(141 176 125 / 0.16);

  --shadow:        0 24px 60px -28px rgb(0 0 0 / 0.7);
  --shadow-sm:     0 6px 20px -10px rgb(0 0 0 / 0.5);
  --card-bg:       var(--surface);
  --card-border:   rgb(255 240 220 / 0.09);
  --header-bg:     rgb(28 21 18 / 0.82);

  --danger-text:   #ff8a7a;
  --map-base:      #2d2520;
}

:root {
  /* ---- Typsnitt ------------------------------------------------------ */
  --font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     'Nunito', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:   'Great Vibes', 'Brush Script MT', cursive;

  --fs-hero:       clamp(2.3rem, 6vw, 4.6rem);
  --fs-h1:         clamp(2.1rem, 5vw, 3.8rem);
  --fs-h2:         clamp(1.7rem, 3.4vw, 2.7rem);
  --fs-h3:         clamp(1.2rem, 1.8vw, 1.45rem);
  --fs-lead:       clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-body:       1.04rem;
  --fs-small:      0.9rem;
  --fs-eyebrow:    0.74rem;

  --lh-tight:      1.08;
  --lh-body:       1.65;

  /* ---- Mått och avstånd --------------------------------------------- */
  --container:     1180px;
  --container-narrow: 800px;
  --gutter:        clamp(1rem, 4vw, 2.5rem);
  --section-y:     clamp(3.2rem, 8vw, 6.5rem);
  --gap:           clamp(1rem, 2.4vw, 1.6rem);

  --radius:        18px;
  --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:      .2s;
  --dur:           .45s;
  --dur-slow:      .9s;
}