/* ────────────────────────────────────────────
   DD:s designsystem — tokens återställda efter Breakdance.

   Breakdance (legacy) definierar sju av DD:s tokennamn på :root med
   Tailwinds palett — white, grey-50, grey-100, grey-200, grey-500,
   grey-700, grey-900. Dess global-settings.css laddas EFTER Bricks
   inline-CSS. Vid lika specificitet vinner den som ligger sist, så hela
   gråskalan blev Tailwinds utan ett enda felmeddelande.

   Semantiska tokens måste också omdeklareras: en custom property löses
   där den deklareras. --bg-plate: var(--grey-100) på :root behåller
   :root:s gråvärde även om --grey-100 sätts om längre ner i trädet.
   Listan nedan är därför den transitiva höljet av de sju.

   Scopat till Bricks renderingsytor så att legacy-Breakdance-sidorna
   — det levande medlemsflödet — behåller sitt nuvarande utseende.
   När Breakdance avvecklas kan scopet lyftas till :root och filen tas bort.

   2026-08-22: Breakdance avaktiverat → scopet lyft till :root (uppmätt före:
   :root och #brx-content redan identiska på sex sidor — Bricks egna :root-
   värden stämmer). Filen behålls som handle 'dd-tokens' (beroende för
   dd-tokens-responsiv/dd-states/dd-formular i snippet 21) och som
   explicit källa för de 35 tokens. Backup: dd-tokens.css.bak-20260822-scope.

   Genererad ur bricks_global_variables 2026-08-02. Redigera inte för hand —
   ändra tokenvärdet i Bricks och generera om.
   ──────────────────────────────────────────── */

:root {
  --grey-900:                  #000000;
  --grey-700:                  #353C44;
  --grey-500:                  #5E6873;
  --grey-200:                  #D6DDE5;
  --grey-100:                  #E9EDF2;
  --grey-50:                   #F7F8FA;
  --white:                     #FFFFFF;
  --bg-page:                   var(--white);
  --bg-card:                   var(--white);
  --bg-card-alt:               var(--grey-100);
  --bg-card-dark:              var(--grey-700);
  --bg-sidebar:                var(--white);
  --bg-plate:                  var(--grey-100);
  --bg-plate-quiet:            var(--grey-50);
  --fg-primary:                var(--grey-900);
  --fg-secondary:              var(--grey-500);
  --fg-muted:                  var(--grey-500);
  --fg-on-dark:                var(--white);
  --fg-on-brand:               var(--white);
  --border-default:            var(--grey-200);
  --border-soft:               var(--grey-100);
  --border-strong:             var(--grey-500);
  --action-primary-fg:         var(--white);
  --action-secondary-bg:       var(--grey-100);
  --action-secondary-bg-hover: var(--grey-200);
  --action-secondary-fg:       var(--grey-900);
  --action-outline-bd:         var(--grey-200);
  --action-outline-fg:         var(--grey-900);
  --action-outline-bg-hover:   var(--grey-50);
  --field-bg:                  var(--grey-100);
  --field-bg-hover:            var(--grey-200);
  --field-bg-disabled:         var(--grey-50);
  --field-fg:                  var(--fg-primary);
  --field-placeholder:         var(--grey-500);
  --focus-ring-color-on-dark:  var(--white);
}