/* Team FM – design‑tokens */
:root{
  /* typografie */
  --tfm-fs-body: 1rem; 
  --tfm-fs-small: .875rem; 
  --tfm-fs-h4: 1.25rem;  /* 20 px */
  --tfm-fs-h3: 1.563rem; /* 25 px */
  --tfm-fs-h2: 1.953rem; /* 31 px */
  --tfm-fs-h1: 2.441rem; /* 39 px */
  --tfm-fs-body-plus: 1.05rem; 
  --tfm-fs-small-plus: .95rem; 
  --tfm-fs-icon-lg: 1.9rem; 
  --tfm-fs-icon-xl: 2.1rem;
  --tfm-font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  /* primaire merk­kleuren */
  --tfm-primary:         #0061FF;   /* basisblauw */
  --tfm-primary-light:   #1040FF;   /* gradient‑start */
  --tfm-primary-dark:    #0044B6;   /* gradient‑eind */

  /* accent / CTA */
  --tfm-cta-yellow:      #FFCC00;   /* algemene CTA */
  --tfm-accent-lime:     #D6FF00;   /* badge‑/highlight */

  /* tekst / achtergrond */
  --tfm-dark-blue:       #002B5B;
  --tfm-text-dark:       #002D5C;
  --tfm-text-dark-rgb:   0,45,92;   /* handig voor rgba() */
  --tfm-surface:         #FFFFFF;
  --tfm-on-surface:      #0D0D0D;

  /* status */
  --tfm-success:         #28C76F;
  --tfm-warning:         #FF9F43;
  --tfm-error:           #EA5455;

  /* spacing */
  --tfm-gap:             0.75rem;
  --tfm-gap-xs: .5rem; 
  --tfm-gap-sm: 8px; 
  --tfm-gap-md: 1rem; 
  --tfm-gap-lg: 12px;

  /* … bestaande tokens … */
  --tfm-cast-connected:  #29B6F6;
  --tfm-cast-connecting: #FFB300;
  --tfm-white:           #FFFFFF;      /* optioneel */
  /* rgb al aanwezig: --tfm-text-dark-rgb */
}

/* ------------------------------------------------------------------
   Dark‑mode (volgt systeeminstelling)
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark){
  :root{
    /* merk­kleuren – iets donkerder verzadigd */
    --tfm-primary:        #4B8AFF;
    --tfm-primary-light:  #3768D4;
    --tfm-primary-dark:   #1F3F8C;

    /* accent lime → minder fel */
    --tfm-accent-lime:    #B8F000;

    /* oppervlakken & tekst */
    --tfm-surface:        #1A1A1A;
    --tfm-on-surface:     #FFFFFF;
    --tfm-text-dark:      #DDDDDD;
    --tfm-text-dark-rgb:  221,221,221;

    /* wit‑token naar off‑white voor shadow‑contrast */
    --tfm-white:          #F2F2F2;
  }
}