/* ============================================================
   byRichard Design System · v1 · Tokens
   Die einzige Stelle, an der Werte definiert werden.
   Nichts anderes im System schreibt je einen Hex-Wert hin.
   ============================================================ */

@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.woff2") format("woff2");
}

:root {
  /* ---------- Farbe: Interaktion ----------
     Genau ein Akzent. Eine zweite Akzentfarbe gibt es bewusst nicht. */
  --dt-primary:          #0066cc;  /* Standard auf hellen Flaechen        */
  --dt-primary-focus:    #0071e3;  /* Fokusring, ausgewaehlte Controls     */
  --dt-primary-on-dark:  #2997ff;  /* NUR auf dunklen Flaechen            */

  /* ---------- Farbe: Text ---------- */
  --dt-ink:              #1d1d1f;
  --dt-body:             #1d1d1f;
  --dt-body-on-dark:     #ffffff;
  --dt-body-muted:       #cccccc;  /* gedaempft auf dunkel                */
  --dt-ink-muted-80:     #333333;
  --dt-ink-muted-48:     #7a7a7a;

  /* ---------- Farbe: Linien ---------- */
  --dt-divider-soft:     #f0f0f0;
  --dt-hairline:         #e0e0e0;

  /* ---------- Farbe: Flaechen ---------- */
  --dt-canvas:           #ffffff;
  --dt-canvas-parchment: #f5f5f7;
  --dt-surface-pearl:    #fafafc;
  --dt-surface-tile-1:   #272729;
  --dt-surface-tile-2:   #2a2a2c;
  --dt-surface-tile-3:   #252527;
  --dt-surface-black:    #000000;
  --dt-surface-chip:     rgba(210, 210, 215, 0.64);
  --dt-surface-card:     #ffffff;  /* Karte auf heller Sektion            */
  --dt-nav-border:       transparent; /* im Hellen traegt Schwarz selbst  */
  --dt-utility-bg:       #1d1d1f;  /* Werkzeug-Button                     */
  --dt-utility-fg:       #ffffff;
  --dt-on-primary:       #ffffff;
  --dt-on-dark:          #ffffff;

  /* ---------- Farbe: Status ----------
     Kein zweiter Akzent, sondern Systemsemantik: diese Farben stehen
     ausschliesslich fuer Maschinenzustand (Container laeuft / gestoppt /
     unklar) und niemals fuer Interaktion. Werte aus Apples Systempalette
     in den Varianten, die auf Weiss AA erreichen.                        */
  --dt-status-ok:        #1a7f37;
  --dt-status-warn:      #b25000;
  --dt-status-err:       #d70015;
  --dt-status-ok-on-dark:   #30d158;
  --dt-status-warn-on-dark: #ff9f0a;
  --dt-status-err-on-dark:  #ff453a;

  /* ---------- Typografie: Familien ---------- */
  --dt-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
                     "Inter var", system-ui, sans-serif;
  --dt-font-text:    "SF Pro Text", -apple-system, BlinkMacSystemFont,
                     "Inter var", system-ui, sans-serif;
  --dt-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* ---------- Typografie: Gewichte ----------
     300 nur fuer bewusst luftige, grosse Flaechen. 500 existiert nicht. */
  --dt-weight-light:   300;
  --dt-weight-regular: 400;
  --dt-weight-semi:    600;

  /* ---------- Typografie: Skala (size / line-height / tracking) ---------- */
  --dt-hero-display-size:   56px;  --dt-hero-display-lh:  1.07; --dt-hero-display-ls: -0.28px;
  --dt-display-lg-size:     40px;  --dt-display-lg-lh:    1.10; --dt-display-lg-ls:  0;
  --dt-display-md-size:     34px;  --dt-display-md-lh:    1.47; --dt-display-md-ls:  -0.374px;
  --dt-lead-size:           28px;  --dt-lead-lh:          1.14; --dt-lead-ls:         0.196px;
  --dt-lead-airy-size:      24px;  --dt-lead-airy-lh:     1.50; --dt-lead-airy-ls:    0;
  --dt-tagline-size:        21px;  --dt-tagline-lh:       1.19; --dt-tagline-ls:      0.231px;
  --dt-body-size:           17px;  --dt-body-lh:          1.47; --dt-body-ls:        -0.374px;
  --dt-body-strong-lh:      1.24;
  --dt-dense-link-lh:       2.41;
  --dt-button-large-size:   18px;
  --dt-caption-size:        14px;  --dt-caption-lh:       1.43; --dt-caption-ls:     -0.224px;
  --dt-caption-strong-lh:   1.29;
  --dt-fine-print-size:     12px;  --dt-fine-print-lh:    1;    --dt-fine-print-ls:  -0.12px;
  --dt-micro-legal-size:    10px;  --dt-micro-legal-lh:   1.30; --dt-micro-legal-ls: -0.08px;
  --dt-nav-link-size:       12px;  --dt-nav-link-lh:      1;    --dt-nav-link-ls:    -0.12px;

  /* ---------- Radius ----------
     Werte ausserhalb dieser Skala kommen nicht vor. */
  --dt-radius-none: 0px;
  --dt-radius-xs:   5px;
  --dt-radius-sm:   8px;   /* kompakte Utility-Controls */
  --dt-radius-md:   11px;
  --dt-radius-lg:   18px;  /* Karten                    */
  --dt-radius-pill: 9999px;/* primaere Aktionen, Chips  */
  --dt-radius-full: 50%;

  /* ---------- Abstand: 8px-Rhythmus ---------- */
  --dt-space-xxs:     4px;
  --dt-space-xs:      8px;
  --dt-space-sm:     12px;
  --dt-space-md:     17px;
  --dt-space-lg:     24px;
  --dt-space-xl:     32px;
  --dt-space-xxl:    48px;
  --dt-space-section:80px;

  /* ---------- Tiefe ----------
     Genau ein Schatten, und der gehoert der Bildflaeche, nicht der UI. */
  --dt-hairline-border: 1px solid rgba(0, 0, 0, 0.08);
  --dt-product-shadow:  3px 5px 30px 0 rgba(0, 0, 0, 0.22);
  --dt-frosted:         saturate(180%) blur(20px);

  /* ---------- Layout ---------- */
  --dt-measure-text: 980px;   /* textlastige Inhalte */
  --dt-measure-grid: 1440px;  /* Raster              */
  --dt-nav-height:   44px;
  --dt-subnav-height:52px;
  --dt-touch-target: 44px;

  color-scheme: light;
}