/* ==========================================================================
   Audirium ontwerpsysteem: DE TOKENSET
   Eén bron voor de marketingsite en de appsuite.

   Doelpaden bij invoering:
     site   ->  /var/www/audirium.net/css/au-tokens.css   (link in de head)
     suite  ->  /opt/shared/au-tokens.css                 (via /shared/au-tokens.css)

   WAAROM HET VOORVOEGSEL au-
   Site en suite hebben nu allebei een set met dezelfde namen en andere waarden.
   --radius-lg is 20px op de site en 8px in de apps. theme-shared.js zet zijn set
   via JavaScript op :root en wordt door ongeveer zestien apps gebruikt, dus het
   herdefinieren van die namen verandert de vorm in al die apps tegelijk.
   Daarom staat de canonieke set onder au-, blijven de oude namen werken, en
   verwijzen ze onderaan dit bestand naar de canonieke waarde. Zo kan elke app
   op eigen tempo mee zonder dat er iets breekt.
   ========================================================================== */

:root {
  /* ---------- Merkkleuren (ongewijzigd overgenomen uit style.css) ---------- */
  --au-navy:        #0A0E27;
  --au-navy-deep:   #060A1F;
  --au-navy-mid:    #111540;
  --au-navy-light:  #1A1F52;
  --au-orange:      #D04A02;
  --au-orange-hot:  #E85D15;
  --au-orange-soft: rgba(208, 74, 2, 0.08);
  --au-orange-glow: rgba(208, 74, 2, 0.15);

  /* ---------- Neutralen ---------- */
  --au-slate:       #8892B0;
  --au-slate-light: #A8B2D1;
  --au-chalk:       #CCD6F6;

  /* ---------- Oppervlakken en tekst, licht thema ---------- */
  --au-surface:      #FFFFFF;
  --au-surface-2:    #F7F8FB;
  --au-surface-3:    #EEF0F5;
  --au-surface-deep: var(--au-navy);
  --au-text:         #3B3F51;
  --au-text-heading: #0A0E27;
  --au-text-dim:     #6B7185;
  --au-text-op-deep: #E6F1FF;
  --au-border:       #E2E5EE;
  --au-border-deep:  rgba(255, 255, 255, 0.14);

  /* ---------- Typografische schaal ----------
     Twaalf treden met echt contrast. De vlakheid van de eerste ontwerpronde
     kwam doordat alles tussen 16 en 50 px zat. Grootste trede 4.5rem, kleinste
     0.8125rem. Fluide treden schalen mee op smalle schermen.
     Nooit px voor lettergroottes, altijd rem. */
  --au-text-2xs:  0.8125rem;   /* 13px, opschrift boven een kop */
  --au-text-xs:   0.875rem;    /* 14px, bijschrift bij een scherm */
  --au-text-sm:   0.9375rem;   /* 15px */
  --au-text-base: 1rem;        /* 16px, lopende tekst */
  --au-text-lg:   1.0625rem;   /* 17px, inleidende alinea */
  --au-text-xl:   1.25rem;     /* 20px, kop derde niveau */
  --au-text-2xl:  1.375rem;    /* 22px */
  --au-text-3xl:  1.75rem;     /* 28px */
  --au-text-4xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);   /* sectiekop */
  --au-text-5xl:  clamp(2.25rem, 1.7rem + 2.6vw, 3rem);
  --au-text-6xl:  clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);    /* hero */

  --au-leading-tight: 1.08;
  --au-leading-snug:  1.25;
  --au-leading-base:  1.65;
  --au-tracking-tight: -0.022em;
  --au-tracking-wide:   0.08em;   /* uitsluitend voor opschriften in kapitaal */
  --au-weight-normal: 400;
  --au-weight-medium: 500;
  --au-weight-semi:   600;
  --au-weight-bold:   700;

  /* ---------- Ruimtematen, achtschaal ----------
     De eerste ronde had kaartpadding van 14, 28, 32 en 36 px door elkaar.
     Alles valt nu op een trede. */
  --au-space-1:  0.5rem;    /* 8  */
  --au-space-2:  1rem;      /* 16 */
  --au-space-3:  1.5rem;    /* 24 */
  --au-space-4:  2rem;      /* 32 */
  --au-space-5:  3rem;      /* 48 */
  --au-space-6:  4rem;      /* 64 */
  --au-space-7:  5rem;      /* 80 */
  --au-space-8:  6rem;      /* 96 */
  --au-section-y: clamp(3rem, 2rem + 4vw, 6rem);  /* verticale sectieruimte */

  /* ---------- Maatvoering ---------- */
  --au-container:      71.25rem;  /* 1140px, gelijk aan de huidige site */
  --au-container-wide: 90rem;     /* 1440px, volle vensterbreedte op desktop: het productbeeld
                                     loopt tot de rand door, dat is de kern van het herontwerp */
  --au-measure:        38rem;     /* leesbreedte lopende tekst */

  /* ---------- Hoeken ----------
     LET OP: de site gebruikt --radius 12 en --radius-lg 20, de suite gebruikt
     --radius-lg 8. Onder au- staat de canonieke schaal. */
  --au-radius-xs:   0.25rem;   /* 4  */
  --au-radius-sm:   0.5rem;    /* 8  */
  --au-radius-md:   0.75rem;   /* 12, gelijk aan de huidige --radius van de site */
  --au-radius-lg:   1.25rem;   /* 20, gelijk aan de huidige --radius-lg van de site */
  --au-radius-full: 9999px;

  /* ---------- Schaduwen, navy getint zoals de site al deed ---------- */
  --au-shadow-sm: 0 1px 2px rgba(10, 14, 39, 0.06);
  --au-shadow-md: 0 0.75rem 1.875rem -0.625rem rgba(10, 14, 39, 0.18);
  --au-shadow-lg: 0 2rem 4rem -1.5rem rgba(10, 14, 39, 0.32);
  --au-shadow-cta: 0 0.75rem 2rem rgba(208, 74, 2, 0.28);

  /* ---------- Beweging ---------- */
  --au-ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --au-ease-out:  cubic-bezier(0.33, 1, 0.68, 1);
  --au-dur-fast:  0.15s;
  --au-dur-base:  0.25s;

  /* ---------- Stapelvolgorde, overgenomen uit theme-shared.js ---------- */
  --au-layer-base:     1;
  --au-layer-dropdown: 10;
  --au-layer-sticky:   100;
  --au-layer-modal:    1000;
  --au-layer-toast:    2000;
  --au-layer-tooltip:  3000;
}

/* ==========================================================================
   Donker thema. Twee schakelaars, allebei nodig:
   het systeemvoorkeur-signaal, en het data-theme attribuut dat de suite zet.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --au-surface:      #131725;
    --au-surface-2:    #0E1220;
    --au-surface-3:    #1B2131;
    --au-surface-deep: #060A1F;
    --au-text:         #C3CADB;
    --au-text-heading: #EAF0FF;
    --au-text-dim:     #8A93AC;
    --au-border:       #242B42;
    --au-orange:       #E85D15;
    --au-orange-soft:  rgba(232, 93, 21, 0.12);
    --au-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --au-shadow-md: 0 0.75rem 1.875rem -0.625rem rgba(0, 0, 0, 0.55);
    --au-shadow-lg: 0 2rem 4rem -1.5rem rgba(0, 0, 0, 0.65);
  }
}

:root[data-theme="dark"] {
  --au-surface:      #131725;
  --au-surface-2:    #0E1220;
  --au-surface-3:    #1B2131;
  --au-surface-deep: #060A1F;
  --au-text:         #C3CADB;
  --au-text-heading: #EAF0FF;
  --au-text-dim:     #8A93AC;
  --au-border:       #242B42;
  --au-orange:       #E85D15;
  --au-orange-soft:  rgba(232, 93, 21, 0.12);
  --au-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --au-shadow-md: 0 0.75rem 1.875rem -0.625rem rgba(0, 0, 0, 0.55);
  --au-shadow-lg: 0 2rem 4rem -1.5rem rgba(0, 0, 0, 0.65);
}

/* ==========================================================================
   Terugverwijzingen voor de bestaande namen.
   Zo blijft alle huidige CSS werken en verandert er visueel niets, terwijl
   nieuw werk uitsluitend de au-namen gebruikt. Bij invoering in de suite komt
   dit blok NIET mee: daar houden --radius-lg en de andere namen hun eigen
   waarde tot een app bewust overstapt.
   ========================================================================== */
:root {
  --navy:        var(--au-navy);
  --navy-deep:   var(--au-navy-deep);
  --navy-mid:    var(--au-navy-mid);
  --navy-light:  var(--au-navy-light);
  --orange:      var(--au-orange);
  --orange-hot:  var(--au-orange-hot);
  --orange-soft: var(--au-orange-soft);
  --orange-glow: var(--au-orange-glow);
  --slate:       var(--au-slate);
  --slate-light: var(--au-slate-light);
  --chalk:       var(--au-chalk);
  --white:       var(--au-text-op-deep);
  --surface:     var(--au-surface);
  --surface-2:   var(--au-surface-2);
  --surface-3:   var(--au-surface-3);
  --text:        var(--au-text);
  --text-heading: var(--au-text-heading);
  --text-dim:    var(--au-text-dim);
  --border:      var(--au-border);
  --radius:      var(--au-radius-md);
  --radius-lg:   var(--au-radius-lg);
  --ease:        var(--au-ease);
}