/* ==========================================================================
   Ridgeback Business Development · Designtokens
   Källa: Ridgeback grafisk manual 1.2, oktober 2026.
   Ändra aldrig ett värde här utan att manualen ändras först.
   ========================================================================== */

:root {
  /* --- Färgtrappan (s. 12) -------------------------------------------- */
  --rbd-steg-1: #4E6A83; /* Djupblå  · R i märket, rubriker, knappar, sidfotsbandet   · 5.7:1 mot vitt */
  --rbd-steg-2: #607D96; /* Arbetsblå · länkar, ikoner, linjer, diagram              · 4.3:1 mot vitt */
  --rbd-steg-3: #7B97AF; /* Mellanblå · B i märket, ytor, sekundära diagramserier    · 3.0:1 mot vitt */
  --rbd-steg-4: #BDCBD7; /* Ljusblå   · D i märket, bakgrundsytor, tonplattor        · 1.7:1 mot vitt */

  --rbd-djupbla:   var(--rbd-steg-1);
  --rbd-arbetsbla: var(--rbd-steg-2);
  --rbd-mellanbla: var(--rbd-steg-3);
  --rbd-ljusbla:   var(--rbd-steg-4);

  /* --- Baser och neutraler (s. 13). Aldrig rent svart. ---------------- */
  --rbd-natt:    #0C1A23; /* mörka bakgrunder, omslag, scen */
  --rbd-skiffer: #1E3040; /* rubrik- och brödtext på ljus botten, sekundär mörk yta */
  --rbd-gra:     #5C6B78; /* sekundär text, bildtexter, källor */
  --rbd-dimma:   #F3F5F7; /* ljusa ytor, paneler, webbens bakgrund */
  --rbd-krita:   #F2EEE7; /* R:et på mörk botten, varm ljus yta (sparsamt) */
  --rbd-vit:     #FFFFFF; /* grundytan på webben */

  /* --- Kompletterande färger (s. 14) ----------------------------------
     Når INTE kontrast för brödtext på vitt. Använd för ytor, linjer,
     ikoner, stora siffror, eller som text på Natt. En accent i taget. */
  --rbd-massing: #C4A052; /* huvudaccent · 7.2:1 mot Natt */
  --rbd-koral:   #D97A62; /* andra accent · 5.8:1 mot Natt */
  --rbd-salvia:  #8AA595; /* kompletterande dataserie · 6.6:1 mot Natt */
  --rbd-ljung:   #8E7FA3; /* kompletterande dataserie · 4.8:1 mot Natt */

  /* Tonsteg 60 / 30 / 12 % (s. 14) */
  --rbd-massing-60: color-mix(in srgb, var(--rbd-massing) 60%, white);
  --rbd-massing-30: color-mix(in srgb, var(--rbd-massing) 30%, white);
  --rbd-massing-12: color-mix(in srgb, var(--rbd-massing) 12%, white);
  --rbd-koral-60:   color-mix(in srgb, var(--rbd-koral) 60%, white);
  --rbd-koral-30:   color-mix(in srgb, var(--rbd-koral) 30%, white);
  --rbd-koral-12:   color-mix(in srgb, var(--rbd-koral) 12%, white);
  --rbd-salvia-60:  color-mix(in srgb, var(--rbd-salvia) 60%, white);
  --rbd-salvia-30:  color-mix(in srgb, var(--rbd-salvia) 30%, white);
  --rbd-salvia-12:  color-mix(in srgb, var(--rbd-salvia) 12%, white);
  --rbd-ljung-60:   color-mix(in srgb, var(--rbd-ljung) 60%, white);
  --rbd-ljung-30:   color-mix(in srgb, var(--rbd-ljung) 30%, white);
  --rbd-ljung-12:   color-mix(in srgb, var(--rbd-ljung) 12%, white);
  --rbd-ljusbla-30: color-mix(in srgb, var(--rbd-ljusbla) 30%, white); /* nivå D-ton */

  /* Botten i 3D-bibliotekets ljusa renderingar (s. 23, 40). Heron använder den
     så att bilden smälter in utan kant. */
  --rbd-hero-ljus: #EDF1F4;
  --rbd-hero-varm: #F2EDE7;

  /* Linjer och rutnät, ljusgrått (s. 24) */
  --rbd-linje:       #E2E7EB;
  --rbd-linje-stark: #DEE4E9;

  /* Diagramserier i fast ordning 1–6 (s. 24) */
  --rbd-serie-1: var(--rbd-djupbla);
  --rbd-serie-2: var(--rbd-massing);
  --rbd-serie-3: var(--rbd-koral);
  --rbd-serie-4: var(--rbd-ljusbla);
  --rbd-serie-5: var(--rbd-salvia);
  --rbd-serie-6: var(--rbd-ljung);
  --rbd-serie-fokus: var(--rbd-massing);  /* ett utvalt värde */
  --rbd-serie-ovriga: var(--rbd-ljusbla); /* resten i fokusdiagram */

  /* --- Semantiska roller · ljus profil (förval för webben) ------------ */
  --rbd-bg:            var(--rbd-vit);
  --rbd-bg-panel:      var(--rbd-dimma);
  --rbd-text:          var(--rbd-skiffer);
  --rbd-text-rubrik:   var(--rbd-skiffer);
  --rbd-text-sekundar: var(--rbd-gra);
  --rbd-kicker:        var(--rbd-djupbla);
  --rbd-lank:          var(--rbd-djupbla);  /* steg 1 för textlänkar: 5.7:1 */
  --rbd-ikon:          var(--rbd-djupbla);
  --rbd-accent:        var(--rbd-massing);
  --rbd-nyckeltal:     var(--rbd-djupbla);
  --rbd-knapp-bg:      var(--rbd-djupbla);
  --rbd-knapp-text:    var(--rbd-vit);
  --rbd-logo-cut:      var(--rbd-vit);      /* linjer i enfärgad symbol */

  /* --- Typografi (s. 17–19) · ett enda typsnitt ---------------------- */
  --rbd-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rbd-light:  300; /* Light 45  · ingresser, stora siffror, citat */
  --rbd-roman:  400; /* Roman 55  · brödtext, bildtexter, tabeller */
  --rbd-medium: 500; /* Medium 65 · kickers, etiketter, knappar */
  --rbd-bold:   700; /* Bold 75   · rubriker */

  /* Webb, desktop (s. 19) */
  --rbd-fs-titel:       64px;
  --rbd-fs-rubrik:      40px;
  --rbd-fs-underrubrik: 22px;
  --rbd-fs-brod:        18px;
  --rbd-lh-brod:        28px;
  --rbd-fs-kicker:      12px;
  --rbd-fs-kalla:       13px;
  --rbd-fs-nyckeltal:   clamp(56px, 7vw, 96px);

  --rbd-lh-rubrik:      1.05;   /* radavstånd 105 % */
  --rbd-lh-ingress:     1.35;   /* radavstånd 135 % */
  --rbd-ls-rubrik:     -0.015em;/* spärrning −1,5 % */
  --rbd-ls-kicker:      0.14em; /* spärrning +14 % */
  --rbd-matt:           68ch;   /* 55–75 tecken per rad */

  /* --- Djup, inte effekter (s. 22) · ljus från vänster ovan ----------- */
  --rbd-niva-d: none;                                         /* vilar */
  --rbd-niva-b: 2px 4px 12px rgb(12 26 35 / 0.10);            /* lyft: 0 1mm 3mm Natt 10 % */
  --rbd-niva-r: 4px 19px 45px rgb(12 26 35 / 0.18),           /* framträdande: 0 5mm 12mm Natt 18 % */
                1px 2px 3px rgb(12 26 35 / 0.12);             /* + kontaktskugga */

  /* Djupledsramen: lager förskjutna som i märket (s. 38) */
  --rbd-djupled-steg: 14px;

  /* --- Layout ------------------------------------------------------- */
  --rbd-max:     1200px;
  --rbd-gutter:  clamp(16px, 4vw, 40px);
  --rbd-sektion: clamp(72px, 10vw, 144px); /* luft och lugn */
  --rbd-radie:   2px;  /* nästan raka hörn, manualen använder inga rundningar */
  --rbd-band-h:  32px; /* sidfotsbandet, = symbolens höjd (min 32 px i fullfärg) */

  /* Logotyp, minsta storlek skärm (s. 7) */
  --rbd-symbol-min:        32px;  /* tre lager */
  --rbd-symbol-mono-min:   16px;  /* enfärgad, 16–31 px */
  --rbd-logo-staende-min: 140px;
  --rbd-logo-liggande-min:180px;

  --rbd-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Mobil: storlekar skalas ner, proportionerna behålls */
@media (max-width: 720px) {
  :root {
    --rbd-fs-titel:       40px;
    --rbd-fs-rubrik:      30px;
    --rbd-fs-underrubrik: 19px;
    --rbd-fs-brod:        17px;
    --rbd-lh-brod:        26px;
  }
}

/* --- Ljuslägen (s. 27): ljus är förval, varm och mörk där de gör skillnad */
.rbd-varm {
  --rbd-bg: var(--rbd-krita);
  --rbd-bg-panel: var(--rbd-vit);
  --rbd-text: var(--rbd-skiffer);
  --rbd-text-rubrik: var(--rbd-skiffer);
  --rbd-kicker: var(--rbd-djupbla);
}
.rbd-mork {
  --rbd-bg: var(--rbd-natt);
  --rbd-bg-panel: var(--rbd-skiffer);
  --rbd-text: var(--rbd-krita);
  --rbd-text-rubrik: var(--rbd-vit);
  --rbd-text-sekundar: var(--rbd-steg-4);
  --rbd-kicker: var(--rbd-massing);
  --rbd-nyckeltal: var(--rbd-massing);
  --rbd-lank: var(--rbd-steg-4);
  --rbd-ikon: var(--rbd-massing);
  --rbd-knapp-bg: var(--rbd-krita);
  --rbd-knapp-text: var(--rbd-natt);
  --rbd-logo-cut: var(--rbd-natt);
  --rbd-linje: rgb(255 255 255 / 0.12);
}