/* BeatMeter designtokens. Ét sted for farver, typografi, afstande og bevægelse.
   Bruges af både site.css (papir-siderne) og maal.css (instrumentet). */
:root{
  /* Kernepalet */
  --color-ink:#1A1A18;
  --color-paper:#F5F3EC;
  --color-sand:#D6C6A8;
  --color-terracotta:#C76F52;
  --color-sage:#8A9A87;
  --color-warm-grey:#A7A399;
  --color-white:#FFFFFF;

  /* Afledte toner. Kernefarverne består ikke alle kontrasttest som tekst på papir,
     så de her bruges, når farven skal bære tekst eller en knap. */
  --color-terracotta-deep:#A94F34;   /* hvid tekst 5,4:1, knapper og links på papir */
  --color-terracotta-soft:#E39A80;   /* tekst på blæk, 7,6:1 */
  --color-sage-deep:#566653;         /* tekst på papir, 5,5:1 */
  --color-sage-soft:#B5C2B2;         /* tekst og streger på blæk, 9,4:1 */
  --color-ink-soft:#5F5C54;          /* sekundær tekst på papir, 6,0:1 */
  --color-paper-deep:#EDE9DD;        /* svag flade på papir */
  --color-sand-soft:#E6DDCB;         /* lys sand til flader */
  --color-ink-raised:#22221F;        /* flade på blæk */
  --color-paper-mute:#C4C0B5;        /* sekundær tekst på blæk, 9,6:1 */

  /* Statusfarver. Funktionelle, ikke brand. Vejledningerne omtaler dem som grøn, gul/orange og rød,
     og de bruges kun sammen med tekst eller tal, aldrig alene. */
  --color-status-good:#A3B7A0;
  --color-status-warn:#D9A84E;
  --color-status-bad:#E5705A;

  /* Linjer */
  --line:rgba(26,26,24,.16);
  --line-strong:rgba(26,26,24,.42);
  --line-on-ink:rgba(245,243,236,.16);

  /* Typografi */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-body:1.0625rem;
  --lh-body:1.65;
  --track-brand:.2em;
  --num-features:"tnum" 1,"lnum" 1;

  /* Former */
  --radius-sm:6px;
  --radius-md:10px;

  /* Afstande */
  --space-xs:.5rem;
  --space-sm:.75rem;
  --space-md:1rem;
  --space-lg:1.5rem;
  --space-xl:2.5rem;
  --space-2xl:4rem;
  --space-3xl:7rem;

  /* Bredder */
  --content-width:1160px;
  --measure:38rem;
  --gutter:clamp(16px,5vw,32px);

  /* Bevægelse */
  --dur-fast:150ms;
  --dur-base:250ms;
  --dur-slow:500ms;
  --ease:cubic-bezier(.3,.7,.3,1);

  /* Skygge. Næsten ingen, kun til overlays. */
  --shadow-soft:0 1px 2px rgba(26,26,24,.06);
}