/* ===================================================================
   PIXELDIENST - tokens.css
   Farben, Typo-Skala, Raster, Easing. Nichts hier malt etwas,
   alles hier wird in base.css und sections.css benutzt.
   =================================================================== */

:root {
  /* --- Flaechen ---------------------------------------------------- */
  --black:        #0d0d10;
  --ink:          #16161a;
  --ink-soft:     #1d1d22;
  --cream:        #f2f0ea;
  --cream-deep:   #e7e3d9;
  --white:        #ffffff;

  /* --- Akzent ------------------------------------------------------
     --violet ist die Flaechenfarbe (Manifest-Hintergrund, Kreise).
     --violet-text ist die aufgehellte Variante fuer Text auf Dunkel:
     #c8adff auf #0d0d10 erreicht 8,4:1 und damit AAA.
     --violet selbst erreicht auf Dunkel nur 6,4:1, reicht fuer Text,
     aber die hellere Variante gibt Luft bei kleinen Graden. */
  --violet:       #b18cff;
  --violet-text:  #c8adff;

  /* Grund von Kopf- und Fussleiste: Schwarz, 80% transparent.
     Bei dieser Deckkraft ist der Grund nur noch ein Schleier und
     bestimmt die Helligkeit nicht mehr selbst, die Sektion darunter
     schlaegt durch. Ueber Creme wird die Leiste hell, ueber dem Hero
     dunkel. Die Schrift muss deshalb mitschalten, main.js setzt dafuer
     .on-light-top und .on-light-bottom. */
  --bar-bg:       rgba(13, 13, 16, .2);
  --bar-line:     rgba(244, 243, 239, .10);

  /* Wortmarke "DIENST" auf heller Leiste. --violet-dark reicht hier
     nicht: ueber der Lavendel-Flaeche kaeme es nur auf 2:1. Dieser
     Ton schafft dort 3,9:1 und ueber Creme 8,5:1. */
  --violet-on-light: #2d1a58;
  --violet-deep:  #8b6cff;   /* bisherige Pixeldienst-Akzentfarbe */
  --violet-dark:  #5b3fb0;   /* Violett auf Creme: 5,6:1 */

  /* --- Text auf dunklem Grund -------------------------------------- */
  --fg:           #f4f3ef;
  --fg-dim:       #a3a3a0;   /* 7,2:1 auf --black */
  --fg-faint:     #6e6e72;   /* nur fuer Zierelemente, nie fuer Fliesstext */
  --line-dark:    rgba(244, 243, 239, .14);

  /* --- Text auf hellem Grund --------------------------------------- */
  --fg-on-light:      #14141a;
  --fg-on-light-dim:  #55555f;   /* 7,1:1 auf --cream */
  --line-light:       rgba(20, 20, 26, .16);

  /* --- Typografie --------------------------------------------------- */
  --ff-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Headline-Skala: skaliert stufenlos, keine Media-Queries noetig. */
  --fs-mega:   clamp(3.4rem, 11.5vw, 13rem);   /* Manifest, Statement */
  --fs-giant:  clamp(2.6rem,  8vw,   8.5rem);  /* Sektionstitel */
  --fs-large:  clamp(1.9rem,  4.6vw, 4rem);    /* Referenztitel */
  --fs-mid:    clamp(1.25rem, 2.1vw, 1.75rem); /* Lead */
  --fs-body:   clamp(1rem,    1.05vw, 1.125rem);
  --fs-small:  .875rem;
  --fs-label:  .6875rem;                       /* Mono-Labels, gesperrt */

  --lh-tight:  .92;
  --lh-snug:   1.1;
  --lh-body:   1.6;
  --ls-tight:  -.035em;
  --ls-label:  .18em;

  /* --- Raster & Rhythmus -------------------------------------------- */
  --pad-x:      clamp(1.25rem, 5vw, 5.5rem);
  --rail-w:     34px;                 /* linke Fixleiste */
  --header-h:   76px;
  --footer-h:   52px;
  --sec-y:      clamp(6rem, 14vw, 14rem);
  --radius:     14px;
  --radius-lg:  26px;

  /* --- Bewegung ------------------------------------------------------ */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast:  .22s;
  --dur:       .45s;
  --dur-slow:  .9s;

  --z-cursor:   9999;
  --z-preload:  9000;
  --z-header:   800;
  --z-rail:     700;
  --z-footer:   700;
}

/* Auf schmalen Viewports verschwindet die linke Fixleiste, der Inhalt
   darf dann die volle Breite nutzen. */
@media (max-width: 860px) {
  :root {
    --rail-w: 0px;
    --header-h: 64px;
    --footer-h: 46px;
  }
}

/* Wer Bewegung reduziert haben will, bekommt sie reduziert: die
   Dauern gehen auf Null, Reveals sind sofort sichtbar, Schleifen
   in hero.js / orbit3d.js / scroll.js starten gar nicht erst. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: .001s;
    --dur:      .001s;
    --dur-slow: .001s;
  }
}