/* ==========================================================================
   Design-Tokens - Rubén Pousa Performance
   Basis abgeleitet aus der Referenz day1-run.webflow.io
   ========================================================================== */

:root {
  /* --- Farbe -------------------------------------------------------------
     Rot ist Reserve, kein Theme. Die Seite lebt von Schwarz, Weiss und Foto. */
  --color-background:   #0e0d0d;   /* bewusst nicht #000 */
  --color-surface:      #151414;   /* minimal abgesetzte Flaechen */
  --color-gray-dark:    #2f2f2f;   /* Sekundaer-Headlines auf dunkel */
  --color-gray-mid:     #5a5a5a;
  --color-gray-light:   #919191;   /* Fliesstext auf dunkel */
  --color-line:         rgba(255, 255, 255, .14);
  --color-accent-dark:  #7d1316;
  --color-accent-light: #c75d5f;
  --color:              #ffffff;
  --color-gys:          rgb(20, 102, 255);   /* Hausfarbe getyoursite, nur fuer die Signatur im Fuss */

  /* --- Fluid-Basis -------------------------------------------------------
     Alles in em. Die Root-Groesse skaliert linear mit der Viewport-Breite,
     Referenzbreite 1440px, geklemmt zwischen 992 und 2440.
     Ein Layout, das auf jedem Desktop identisch proportioniert ist. */
  --size-container-min:   992px;
  --size-container-max:   2440px;
  /* Breite der Buehne. Genau dort, wo die Schrift ohnehin aufhoert zu
     wachsen: ab hier steht das Layout komplett still und zentriert sich,
     statt sich weiter zu strecken. Auf einem 34-Zoll-Bildschirm sieht die
     Seite damit aus wie auf einem sehr guten 27er, mit dunklen Raendern
     links und rechts. Zweiter Grund: das Hero-Foto liegt mit 2400 Pixeln
     vor, breiter wuerde es hochskaliert und weich. */
  --size-stage:           2440px;
  --size-container-ideal: 1440;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / var(--size-container-ideal));
  /* Untergrenze 13px: bei genau 992px Viewport ergaebe die reine Formel
     11px Root und damit unlesbaren Fliesstext. Obergrenze 30px, damit die
     Seite auf sehr breiten Bildschirmen nicht ins Plakathafte kippt. */
  --root-size: clamp(13px, calc(var(--size-font) * 16), 30px);

  /* --- Typografie --------------------------------------------------------
     Zentrale Regel: Faktor ~17 zwischen Gross und Klein, dazwischen fast
     nichts. Display extrem eng getrackt, Mono-Labels winzig und weit. */
  --font-family:      "Satoshi", "Satoshi Fallback", -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Helvetica, Arial, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                      Consolas, "Liberation Mono", monospace;

  --font-size-display:    10.5em;
  --font-size-h1:          7.5em;
  --font-size-h2:         4.25em;
  --font-size-h3:            3em;
  --font-size-h4:        1.875em;
  --font-size-h5:          1.5em;
  --font-size-body:          1em;
  --font-size-details:       1em;
  --font-size-large-mono:  .875em;
  --font-size-caps:        .875em;
  --font-size-small-mono:  .625em;

  --font-weight-regular:  400;
  --font-weight-medium:   500;   /* der einzige real genutzte Weight */
  --font-weight-semibold: 600;

  --letter-spacing-tight-04: -.04em;  /* Display */
  --letter-spacing-tight-02: -.02em;  /* H2 */
  --letter-spacing-tight-01: -.01em;  /* H3 */
  --letter-spacing-0:          0em;
  --letter-spacing-loose-02:  .02em;
  --letter-spacing-loose-05:  .05em;  /* Mono-Labels */

  --line-height-90:   .9;
  --line-height-100:  1;
  --line-height-105:  1.05;
  --line-height-108:  1.08;
  --line-height-120:  1.2;
  --line-height-150:  1.5;

  /* --- Raster ------------------------------------------------------------ */
  --grid-columns: 12;
  --grid-gutter:  1.25em;
  --grid-margin:  1.25em;
  --grid: repeat(var(--grid-columns), minmax(0, 1fr));

  /* --- Rhythmus ---------------------------------------------------------- */
  --space-section: 9em;
  --space-block:   4em;

  /* --- Bewegung ---------------------------------------------------------- */
  --ease-smooth:     cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-gentle: cubic-bezier(0.17, 1, 0.35, 0.96);
  --ease-opacity:    cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   .28s;
  --duration-base:   .6s;
  --duration-slow:   1.1s;

  --z-content: 1;
  --z-nav:     50;
  --z-bar:     60;
  --z-cursor:  90;
  --z-loader:  100;
}

/* --- Mobil / Tablet -------------------------------------------------------
   Unterhalb der Clamp-Untergrenze wird auf eine eigene Referenzbreite
   umgestellt, sonst friert die Root-Groesse bei 992px ein und alles wird
   auf dem Handy unlesbar klein. Zusaetzlich wird die Display-Typo
   zurueckgenommen - 10.5em waeren auf 375px zwei Buchstaben pro Zeile. */
@media (max-width: 991px) {
  :root {
    --size-container: clamp(320px, 100vw, 991px);
    --size-font: calc(var(--size-container) / 991);
    --root-size: clamp(15px, 3.9vw, 18px);

    --font-size-display: 3.75em;
    --font-size-h1:      3.25em;
    --font-size-h2:      2.25em;
    --font-size-h3:      1.75em;
    --font-size-h4:      1.25em;

    --grid-columns: 4;
    --grid-margin:  1.25em;
    --space-section: 5.5em;
    --space-block:   2.5em;
  }
}