/*
  tokens.css — EmptySpot designsystem, källa till alla värden.
  Regel: varje token definieras en gång med ett bokstavligt värde.
  Ingen token får peka på en annan (inga alias, ingen
  --färg-a: var(--färg-b)). Behövs ett nytt värde: lägg till en ny
  token här, hitta inte på en lokalt i en komponentfil.
*/

:root {
  /* ---------- Färg — bas ---------- */
  --paper:        #F4F3EF; /* sidans grundyta */
  --paper-pure:   #FFFFFF; /* kort och ytor som ska lyfta ur --paper */
  --ink:          #111110; /* text, mörka sektioners bakgrund */
  --ink-soft:     #55534E; /* brödtext i sekundär vikt */
  --ink-mute:     #6B6862; /* etiketter, metadata — mörkare än ursprungsförslaget
                               #8C8982 (3.14:1) för att klara 4.5:1 på --paper
                               även i liten textstorlek, se styleguide.html */
  --ink-on-dark:  #F4F3EF; /* text på --ink */
  --ink-on-dark-soft: #B8B6AE; /* sekundär text på --ink */
  --rule:         #DEDCD5; /* hårlinjer, rent dekorativa avdelare */
  --rule-strong:  #111110; /* betonade linjer, interaktiva komponentkanter */

  /* ---------- Färg — accent ---------- */
  /* Beslutat värde: #1F5FD6 (docs/beslut.md, avsnitt 1). Betyder
     "nu": nedräkning, släpp-pris, primärknapp, aktivt
     navigationsläge. Inget annat. Max ~3% av skärmens yta.
     Kontrastprövad mot alla tre ytorna:
       --signal som text på --paper:            5.16:1 (kräver 4.5:1)
       vit text på --signal:                    5.73:1 (kräver 4.5:1)
       --signal mot --ink (knapp, mörk sektion): 3.30:1 (kräver 3:1)
     Det tredje kravet styr valet. Djupare blå faller isär mot --ink:
     #0A24E8 ger 2.19:1, #0057B8 ger 2.75:1 — en primärknapp som
     försvinner in i bakgrunden på väntelistesektionen. #1F5FD6 är
     den djupaste blåtonen som klarar både --paper och --ink utan en
     andra token för mörka ytor. En accent, ett värde — ingen
     sekundär blå, ingen ljusare variant för mörka sektioner. */
  --signal:       #1F5FD6;
  --signal-ink:   #FFFFFF; /* text/ikon på --signal */

  /* Ordmärket är alltid svart (--ink), aldrig --signal. */

  /* ---------- Typografi ---------- */
  --font: "Helvetica Neue", Helvetica, "Inter Tight", Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  --t-display: clamp(3.25rem, 8vw, 7.5rem); /* hero-rubrik. Golvet är
    inte dimensionerat för att bära godtyckligt långa ord (t.ex.
    verksamhetsnamn eller bannertext) — det är en copy-regel, inte ett
    CSS-problem: inget ord över 12 tecken i display-text, se
    styleguide.html. Om ett långt ord ändå måste sättas stort: använd
    hyphens:auto (klass .display--hyphenate), aldrig break-word. */
  --t-h1:      clamp(2.25rem, 4vw, 3.5rem); /* sektionsrubrik */
  --t-h2:      1.5rem;                      /* blockrubrik */
  --t-body-lg: 1.25rem;                     /* ingress */
  --t-body:    1rem;                        /* brödtext */
  --t-small:   0.875rem;                    /* metadata */
  --t-label:   0.75rem;                     /* versal etikett */

  --lh-display: 0.92;
  --lh-h1:      1.0;
  --lh-h2:      1.2;
  --lh-body-lg: 1.45;
  --lh-body:    1.55;
  --lh-small:   1.4;

  --tracking-display: -0.03em;
  --tracking-h1:      -0.02em;
  --tracking-h2:      -0.01em;
  --tracking-label:    0.12em;

  --measure: 68ch; /* max radlängd i brödtext */

  /* ---------- Rum ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 192px;

  /* ---------- Rutnät ---------- */
  --grid-columns:      12;
  --grid-max:          1440px;
  --grid-gutter:       24px;
  --grid-margin:       24px;
  --grid-margin-mobile: 20px;
  --section-gap:        128px;
  --section-gap-mobile: 72px;

  /* ---------- Ytor ---------- */
  --radius: 2px; /* i princip skarpa hörn, se avsnitt 6.4 */

  /* ---------- Rörelse ---------- */
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur:      180ms;
}