/* ==========================================================================
   HYBRIDKLUBBEN — 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.

   Accent- och pulsfärgen kan även ändras utan kod under
   Admin → Inställningar → Utseende (de skriver över värdena nedan).
   ========================================================================== */

:root {
  /* ---- Färger -------------------------------------------------------- */
  --bg:            #0b0b0d;   /* sidans bakgrund */
  --bg-raised:     #121215;   /* sektioner som ska lyftas en aning */
  --surface:       #17171b;   /* kort och rutor */
  --surface-2:     #1f1f25;   /* hover, inmatningsfält */
  --line:          rgb(255 255 255 / 0.08);
  --line-strong:   rgb(255 255 255 / 0.16);

  --text:          #f5f5f2;
  --text-muted:    #a6a6ad;
  --text-dim:      #6e6e76;

  --accent:        #ff4d1a;   /* svett — knappar, länkar, glöd */
  --accent-2:      #ff2d55;   /* gradientens andra ände */
  --pulse:         #c6ff3d;   /* puls — EKG-linjen och små detaljer */
  --on-accent:     #0b0b0d;   /* text på accentfärgade knappar */

  --gradient:      linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%);
  --glow:          0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
                   0 10px 40px -8px color-mix(in srgb, var(--accent) 55%, transparent);
  --glow-pulse:    0 0 24px color-mix(in srgb, var(--pulse) 55%, transparent);

  --success:       #3ddc84;
  --danger:        #ff4d4d;

  /* ---- Typsnitt ------------------------------------------------------ */
  --font-display:  'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:     'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero:       clamp(3.4rem, min(10vw, 15svh), 9.5rem);
  --fs-h1:         clamp(2.8rem, 7vw, 6rem);
  --fs-h2:         clamp(2.2rem, 4.8vw, 4rem);
  --fs-h3:         clamp(1.5rem, 2.4vw, 2rem);
  --fs-lead:       clamp(1.1rem, 1.6vw, 1.3rem);
  --fs-body:       1.0625rem;
  --fs-small:      0.9rem;
  --fs-eyebrow:    0.82rem;

  --lh-tight:      0.9;
  --lh-body:       1.65;

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

  --radius:        14px;
  --radius-sm:     8px;
  --radius-lg:     22px;

  --header-h:      72px;

  /* ---- 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:      .9s;
  --beat:          .83s;      /* hjärtslagets längd — ändras av pulsmätaren */
}