/* ============================================================
   SPORTMARKET° — designtokens v1.1
   Källa: 10_BrandBook_SPORTMARKET.pdf (1988 / 2026), avsnitt 03.02–04.02.
   v1.1 (20/10 2026): rörelse och plan ur underlag-v1.1/03-spec-v1.1.md.
   Sidhänvisning = "s. N" i brandboken.
   KÄLLA   = värdet står i brandboken
   HÄRLETT = räknat ur brandbokens värden (metoden står bredvid)
   ARBETSVÄRDE = saknas i brandboken; ersätts när designern anger det
   Kontraster uppmätta enligt WCAG 2.1.
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Färger (KÄLLA, s. 15) -------------------------------- */
  --sm-orange: #FF9900;      /* Signatur. Signalfärg: CTA, navigation, °, viktig data, wayfinding */
  --sm-charcoal: #3A3A3A;    /* Text och logotyp på ljus grund · 11,37:1 mot vitt */
  --sm-marine: #1D2733;      /* Deep Marine. Primär mörk bas · vitt 15,11:1 */
  --sm-light: #F1F5F9;       /* Subtle Light Grey. Text/logotyp på mörk grund · 13,79:1 mot marine */
  --sm-bluegrey: #96AAB7;    /* Subtle Blue Grey. Sekundär info, diagram · 2,41:1 mot vitt = aldrig liten text på vitt */
  --sm-white: #FFFFFF;       /* Primär ljus bas */

  /* ---- Roller (KÄLLA, s. 15 och 17: standardkombinationer) --- */
  --sm-bg: var(--sm-white);
  --sm-text: var(--sm-charcoal);
  --sm-text-secondary: var(--sm-charcoal);   /* Blue Grey fallerar på vitt; se s. 17 */
  --sm-accent: var(--sm-orange);             /* grafik och markering på ljust, aldrig brödtext (2,14:1) */
  --sm-rule: var(--sm-bluegrey);             /* linjer och diagram, ej text */

  /* ---- Typsnitt (KÄLLA, s. 12 och 14) ----------------------- */
  --sm-font: "Inter", Arial, sans-serif;     /* Arial är brandbokens enda godkända ersättning */

  /* Vikter (KÄLLA, s. 13, tabellen Typografisk hierarki) */
  --sm-weight-display: 700;    /* Bold */
  --sm-weight-heading: 600;    /* SemiBold */
  --sm-weight-subheading: 600; /* SemiBold */
  --sm-weight-body: 400;       /* Regular */
  --sm-weight-label: 500;      /* Medium */

  /* Spärrning (HÄRLETT: tracking i 1/1000 em, s. 13) */
  --sm-track-display: 0.1em;     /* 100 */
  --sm-track-heading: 0.1em;     /* 100 */
  --sm-track-subheading: 0.1em;  /* 100 i tabellen; 50 i exemplet på samma sida */
  --sm-track-body: 0.05em;       /* 50 */
  --sm-track-label: 0.075em;     /* 75 */

  /* Storlekar på bildyta 1920 × 1080
     (HÄRLETT: brandbokens pt avser 16:9-bild, 960 pt bred → 2 px/pt vid 1920 px) */
  --sm-slide-display: 80px;    /* 40 pt */
  --sm-slide-heading: 60px;    /* 30 pt */
  --sm-slide-subheading: 32px; /* 16 pt */
  --sm-slide-body: 28px;       /* 14 pt */
  --sm-slide-label: 20px;      /* 10 pt */

  /* Storlekar för webb och dokument
     (HÄRLETT: samma proportioner, brödtext = 16 px; label avrundad upp till 12 px) */
  --sm-web-display: clamp(2.25rem, 1.6rem + 2.4vw, 2.875rem); /* 36 → 46 px */
  --sm-web-heading: clamp(1.75rem, 1.4rem + 1.4vw, 2.125rem); /* 28 → 34 px */
  --sm-web-subheading: 1.125rem;  /* 18 px */
  --sm-web-body: 1rem;            /* 16 px */
  --sm-web-label: 0.75rem;        /* 12 px */
  --sm-leading-tight: 1.1;        /* ARBETSVÄRDE: versalrubriker */
  --sm-leading-body: 1.5;         /* ARBETSVÄRDE: "enkelt och luftigt", s. 13 */

  /* ---- Rytm (ARBETSVÄRDE: brandboken kräver "konsekventa marginaler", s. 27, men anger inga mått) */
  --sm-space-1: 8px;
  --sm-space-2: 16px;
  --sm-space-3: 24px;
  --sm-space-4: 32px;
  --sm-space-6: 48px;
  --sm-space-8: 64px;
  --sm-space-12: 96px;

  /* ---- Logotyp ---------------------------------------------- */
  /* Slogan = halva ordmärkets storlek, Inter Regular (KÄLLA, s. 18).
     Frizon = "logotypens storlek åt alla håll" (s. 23, sidan märkt "under construction"). */

  /* ---- Rörelse (v1.1, ARBETSVÄRDE: spec 20/10 2026) ----------
     "Orange energi vs. Nordisk kontroll" (s. 2): basen bromsar in lugnt, ingen studs.
     Sluttillståndet är alltid förvalt; rörelse får aldrig vara det som gör något synligt. */
  --sm-motion-enter: 700ms;     /* text och block tonar fram */
  --sm-motion-exit: 400ms;      /* det som lämnar; alltid kortare än in */
  --sm-motion-micro: 150ms;     /* hovring, fokus, val */
  --sm-motion-stagger: 120ms;   /* mellan element i läsordning */
  --sm-motion-slide: 600ms;     /* byte av bild i presentation, byte av vy */
  --sm-motion-count: 1200ms;    /* siffror räknas upp (nivå B, C) */
  --sm-motion-ring: 120s;       /* ett varv för 360°-ringen; alltid med paus (WCAG 2.2.2) */
  --sm-ease: cubic-bezier(0.2, 0, 0, 1);         /* all basrörelse */
  --sm-ease-exit: cubic-bezier(0.3, 0, 1, 1);    /* det som lämnar */
  --sm-ease-count: cubic-bezier(0.33, 1, 0.68, 1); /* uppräkning */
  --sm-motion-distance: 16px;   /* så långt text rör sig när den tonar fram */

  /* ---- Djup och plan (v1.1) ----------------------------------
     Djup kommer ur plan, fart och ton. Aldrig skuggor, gradienter, glas eller oskärpa (s. 27). */
  --sm-parallax-photo: 0.5;     /* fotots fart mot texten (B, C) */
  --sm-parallax-reveal: 0.25;   /* fart när en bild avtäcks under en zon */
  --sm-approach: 1.05;          /* fotot närmar sig under en skärm scroll */
  --sm-tone: 0.45;              /* Deep Marine över foto där text ligger (som s. 47) */
  --sm-tone-max: 0.65;          /* tonen när zonen närmar sig (C) */
  --sm-z-landskap: 0;           /* 0 foto, video */
  --sm-z-ton: 10;               /* 1 Deep Marine över bilden */
  --sm-z-innehall: 20;          /* 2 rubrik, text, siffror, ring, zon */
  --sm-z-motiv: 30;             /* 3 frilagt motiv (C) */
  --sm-z-ram: 40;               /* 4 avsändare, sidhuvud, sidfot; ligger still */
  --sm-z-signal: 50;            /* 5 orange: golvtejp, knapp, aktivt val */
}

/* Reducerad rörelse: sluttillståndet visas direkt, ingen parallax, ingen uppräkning.
   Fokus och hovring (micro) får finnas kvar. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sm-motion-enter: 0ms;
    --sm-motion-exit: 0ms;
    --sm-motion-stagger: 0ms;
    --sm-motion-slide: 0ms;
    --sm-motion-count: 0ms;
    --sm-motion-distance: 0px;
    --sm-parallax-photo: 1;
    --sm-parallax-reveal: 1;
    --sm-approach: 1;
  }
}

/* Mörk grund (KÄLLA, s. 17: Deep Marine + White; Light Grey för sekundärt) */
.sm-dark {
  --sm-bg: var(--sm-marine);
  --sm-text: var(--sm-white);
  --sm-text-secondary: var(--sm-light);  /* 13,79:1 */
  --sm-accent: var(--sm-orange);          /* 7,06:1 — får bära text här */
  --sm-rule: var(--sm-bluegrey);          /* 6,28:1 */
  background: var(--sm-bg);
  color: var(--sm-text);
}

/* Typografiska nivåer (KÄLLA s. 12–13: versaler i rubrik/underrubrik/label, meningsform i brödtext) */
.sm-display    { font: var(--sm-weight-display) var(--sm-web-display)/var(--sm-leading-tight) var(--sm-font); letter-spacing: var(--sm-track-display); text-transform: uppercase; }
.sm-heading    { font: var(--sm-weight-heading) var(--sm-web-heading)/var(--sm-leading-tight) var(--sm-font); letter-spacing: var(--sm-track-heading); text-transform: uppercase; }
.sm-subheading { font: var(--sm-weight-subheading) var(--sm-web-subheading)/1.3 var(--sm-font); letter-spacing: var(--sm-track-subheading); text-transform: uppercase; }
.sm-body       { font: var(--sm-weight-body) var(--sm-web-body)/var(--sm-leading-body) var(--sm-font); letter-spacing: var(--sm-track-body); }
.sm-label      { font: var(--sm-weight-label) var(--sm-web-label)/1.3 var(--sm-font); letter-spacing: var(--sm-track-label); text-transform: uppercase; }