/* ============================================================
   HitnSpin Sverige — Design Tokens
   Palett från varumärkets logotyp (lila / orange / guld)
   + accenter från den svenska flaggan (blått / gult).
   Nordisk, svalare riktning än den ungerska föregångaren.
   Ändrar du HEX här — ändras hela sajten.
   ============================================================ */

:root {
  /* --- Brand core (från logotypen) --- */
  --brand-purple:       #45004e;  /* huvudlila (fördjupad) */
  --brand-purple-deep:  #23002a;
  --accent:             #d4481f;  /* orange-röd CTA */
  --accent-hover:       #ff5000;
  --accent-bright:      #ff8b34;

  /* --- Nordisk blå (sekundär accent — ersätter vinröd) --- */
  --nordic:      #1d6fa3;   /* nordisk stålblå */
  --nordic-deep: #0e4d78;
  --wine:        #1d6fa3;   /* alias: gammal "wine" pekar nu på nordisk blå */
  --wine-deep:   #0e4d78;

  /* --- Gold / VIP --- */
  --gold:        #ffc400;
  --gold-deep:   #f0a200;
  --gold-soft:   #ffe07a;
  --cream:       #fff0b0;

  /* --- Red (endast varumärkets eld-CTA) --- */
  --red:         #dc1f00;
  --red-deep:    #9f0400;

  /* --- Svenska flaggans accenter (blått / gult) --- */
  --flag-red:    #006aa7;   /* "primär flaggaccent" = svensk blå (namnet bevarat för CSS) */
  --flag-green:  #fecc00;   /* svensk gul (namnet bevarat för CSS) */
  --flag-black:  #005a8c;   /* mörk blå för kantlinjer (undvik vitt på ljus yta) */
  --flag-white:  #ffffff;   /* neutral (18+-bricka på mörk bakgrund) */
  --flag-blue:   #006aa7;
  --flag-yellow: #fecc00;

  /* --- Ljust tema (svalare, nordiskt) --- */
  --bg-base:     #f6f7fb;   /* body-bas — nästan vitt med svalt ljus */
  --bg-alt-1:    #eef4fb;   /* sektion-alternant A (sval blå-lavendel) — fasförskjuten mot HU */
  --bg-alt-2:    #fbf4e6;   /* sektion-alternant B (varm grädde) */
  --bg-card:     #ffffff;   /* kort/tabeller */
  --bg-card-2:   #eaf1f8;   /* sval ljusblå zebra */

  /* --- Text --- */
  --text:        #14202b;
  --text-muted:  #455563;
  --text-dim:    #7c8a98;

  /* --- Kantlinjer / avdelare --- */
  --border:      #d7e1ec;
  --border-soft: #e7eef5;

  /* --- Lojalitetsstatusar --- */
  --status-bronze:   #c98a4b;
  --status-silver:   #d6dde6;
  --status-gold:     #ffc700;
  --status-platinum: #e8f0ff;

  /* --- Semantik --- */
  --pro:  #1f9d57;
  --con:  #d9342b;

  /* --- Varumärkesgradienter --- */
  --grad-fire:   linear-gradient(135deg, #ff8b34 0%, #d4481f 45%, #9f0400 100%);
  --grad-gold:   linear-gradient(135deg, #ffe07a 0%, #ffc400 55%, #f0a200 100%);
  --grad-purple: linear-gradient(135deg, #45004e 0%, #23002a 100%);
  /* "jewel" omtolkad nordiskt: guld → nordisk blå (H2-stapel, listmarkörer, note) */
  --grad-jewel:  linear-gradient(135deg, #ffc400 0%, #1d6fa3 58%, #006aa7 100%);
  /* vertikal stapel framför H2 (på ljus yta): svensk blå → gul */
  --grad-flag:   linear-gradient(180deg, #006aa7 0%, #006aa7 50%, #fecc00 50%, #fecc00 100%);
  /* horisontell tunn rand (header/footer/hero/understrykning) — antyder svenska korset */
  --grad-flag-h: linear-gradient(90deg, #006aa7 0%, #006aa7 40%, #fecc00 40%, #fecc00 60%, #006aa7 60%, #006aa7 100%);

  /* --- Typografi --- */
  --font-head: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --fs-h1: clamp(1.9rem, 4.5vw, 3rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.1rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.4rem);
  --fs-body: 1.02rem;
  --fs-small: 0.88rem;

  /* --- Radier / skuggor / mellanrum --- */
  --radius-sm: 6px;
  --radius:    11px;
  --radius-lg: 18px;
  --radius-asym: 12px;  /* nordisk linje: jämn rundning (ersätter HU:s asymmetri) */

  --shadow-sm: 0 3px 10px rgba(17, 17, 17, .10);
  --shadow:    0 16px 38px rgba(17, 17, 17, .16);
  --shadow-accent: 0 9px 24px rgba(221, 0, 0, .28);
  --shadow-gold:   0 9px 24px rgba(255, 175, 0, .30);

  --container: 1140px;
  --header-h: 70px;
  --gap: clamp(1rem, 3vw, 2.2rem);
}