/* ============================================================
   digitalantrieb / 01 - DESIGN TOKENS
   Einzige Quelle der Wahrheit fuer Farbe, Typo, Raum, Motion.
   ============================================================ */

:root {
  /* --- FARBE ------------------------------------------------
     Die Seite ist durchgehend dunkel. Rhythmus entsteht nicht
     mehr aus Hell gegen Dunkel, sondern aus drei sehr nah
     beieinander liegenden Tiefen. Das ist ruhiger und wirkt
     hochwertiger als ein staendiger Wechsel.

     ink      : Grundflaeche
     ink-soft : leicht angehoben, fuer ganze Sektionen
     ink-deep : markengetoente Tiefe, fuer Akzentflaechen
     chalk    : Schrift
     drive    : Markenfarbe, traegt die Bildgradierung
     signal   : Akzent. Achse, Indizes, aktive Zustaende, Preise.
  --------------------------------------------------------- */
  --ink:        #0A0A0C;
  --ink-soft:   #121217;
  --ink-lift:   #16161C;
  --ink-deep:   #0B0E26;
  --chalk:      #ECECE6;
  --drive:      #2B39F0;
  --signal:     #FF5A1F;

  /* Semantische Buehnen-Tokens. Sektionen kippen nur diese. */
  --stage:      var(--ink);
  --on-stage:   var(--chalk);
  --on-stage-2: color-mix(in srgb, var(--chalk) 62%, transparent);
  --rule:       color-mix(in srgb, var(--chalk) 15%, transparent);
  /* Flaechen, die sich von der Buehne abheben sollen */
  --surface:    color-mix(in srgb, var(--chalk) 4.5%, var(--stage));
  --surface-2:  color-mix(in srgb, var(--chalk) 8%, var(--stage));

  /* --- TYPOGRAFIE ------------------------------------------- */
  --font-display: "Archivo", "Archivo Expanded", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fliessender Typo-Massstab. Grosse Grade tracken negativ,
     kleine positiv. Die Grade sind so bemessen, dass keine
     Zeile in ihrer Maske abgeschnitten wird. */
  --t-mega:  clamp(2rem, 9.4vw, 11.5rem);
  --t-xxl:   clamp(1.6rem, 6.7vw, 7rem);
  --t-xl:    clamp(1.55rem, 4.8vw, 5rem);
  --t-lg:    clamp(1.45rem, 3.6vw, 3.2rem);
  --t-md:    clamp(1.15rem, 1.7vw, 1.5rem);
  --t-body:  clamp(1rem, 1.05vw, 1.125rem);
  --t-sm:    0.875rem;
  --t-meta:  0.6875rem;

  --track-mega: -0.045em;
  --track-xl:   -0.03em;
  --track-lg:   -0.02em;
  --track-meta:  0.16em;

  --lead-tight: 0.86;
  --lead-snug:  1.02;
  --lead-body:  1.58;

  /* --- RAUM -------------------------------------------------
     Ein Rhythmus, konsequent. Sektionen atmen schwer. */
  --gutter:   clamp(1.25rem, 4.2vw, 4.5rem);
  --rail:     clamp(0rem, 6vw, 7.5rem);   /* linke Achsen-Spur */
  /* Kuerzer als frueher. Die Seite soll atmen, aber der Weg
     von Leistung zu Preis zu Anfrage darf nicht zur Wanderung
     werden. */
  --sec-y:    clamp(4.5rem, 10vw, 10rem);
  --sec-y-lg: clamp(6.5rem, 14vw, 14rem);
  --stack-1: 0.5rem;
  --stack-2: 1rem;
  --stack-3: 1.75rem;
  --stack-4: 3rem;
  --stack-5: 5.5rem;
  --maxw:    92rem;

  /* --- FORM -------------------------------------------------
     Eine Radius-Sprache: technisch, kantig. Kreise nur dort,
     wo etwas wirklich rotiert. */
  --r-0: 0px;
  --r-1: 2px;
  --r-round: 999px;
  --hair: 1px;

  /* Breite des Markenzeichens in der Navigation. Steht hier und
     nicht in 04-chrome.css, weil 03-layout.css sie fuer die
     Antriebsachse braucht: Die Achse ist der verlaengerte
     Schaft des Zeichens und muss mit ihm fluchten. Eine Zahl,
     zwei Dateien - deshalb ein Token. */
  --mark-breite: 44px;

  /* --- MOTION -----------------------------------------------
     Drei Ebenen. Level 1 traegt, Level 3 antwortet. */
  --d-l1: 1.4s;    /* Buehne, grosse Bilder */
  --d-l2: 0.72s;   /* Inhaltsbloecke */
  --d-l3: 0.2s;    /* Buttons, Cursor, Hover */

  --e-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --e-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --e-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --e-mask:   cubic-bezier(0.85, 0, 0.15, 1);

  /* Laufzeit-Werte, von JS gespeist */
  --vel: 0;          /* Scroll-Momentum, -1 .. 1 */
  --progress: 0;     /* Scroll-Fortschritt, 0 .. 1 */

  /* Farbe der festen Ebene ueber der Seite: Navigation und
     Cursor. Die Seite ist durchgehend dunkel, das Chrom bleibt
     deshalb hell. Der Mechanismus bleibt trotzdem bestehen,
     falls spaeter eine helle Flaeche dazukommt. */
  --chrome: var(--chalk);
  --chrome-bg: var(--ink);

  /* --- EBENEN ----------------------------------------------- */
  --z-base: 0;
  --z-rail: 20;
  --z-nav: 60;
  --z-menu: 70;
  --z-cursor: 90;
  --z-loader: 100;

  color-scheme: dark;
}

/* Drei Tiefen statt Hell gegen Dunkel. Der Unterschied ist
   klein, aber er traegt den Rhythmus der Seite. */
[data-stage="ink"]  { --stage: var(--ink); }
[data-stage="soft"] { --stage: var(--ink-soft); }
[data-stage="lift"] { --stage: var(--ink-lift); }

[data-stage="deep"] {
  --stage: var(--ink-deep);
  --rule: color-mix(in srgb, var(--chalk) 20%, transparent);
  --surface: color-mix(in srgb, var(--chalk) 6%, var(--stage));
}

/* Chrom folgt der Buehne unter der Navigationszeile.
   Bei offenem Menue gilt immer die dunkle Flaeche. */
html[data-chrome="light"] { --chrome: var(--ink); --chrome-bg: var(--chalk); }
html[data-menu="open"] { --chrome: var(--chalk); --chrome-bg: var(--ink); }