/* =====================================================================
   Traxx — Design Tokens · NEXT (Richtung „Athletisch-plakativ")
   ---------------------------------------------------------------------
   Drop-in-Ersatz für src/tokens.css. Gleiche API (--c-*, --t-*, --s-*),
   damit traxx-ui.css und die Screens ohne Umbau weiterlaufen.

   Was sich ändert:
   1. Ein Webfont (Sora) für Display/Labels/Zahlen. Body bleibt System.
   2. Radien flach: 2px für Flächen, 999px nur für Pills/Punkte.
   3. Schatten entfallen. Tiefe entsteht über Verläufe und Flächenwechsel.
   4. Verlaufs-Tokens (--g-*) als neue Ebene für Flächen und Akzente.
   5. Effort-Hues gesättigter, nur flächig — keine 13%-Tints als Rahmen.
   6. Mehr Luft: Gutter und Section-Abstände hochgezogen.
   ===================================================================== */

@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-Variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* ---------- Primitive: Traxx Orange (unverändert) ---------- */
  --tx-orange-50:  #FFF3EC;
  --tx-orange-100: #FFE2D3;
  --tx-orange-200: #FFC2A3;
  --tx-orange-300: #FF9D6E;
  --tx-orange-400: #FF8A4C;
  --tx-orange-500: #FF5C1A;   /* Markenkern */
  --tx-orange-600: #E24608;
  --tx-orange-700: #B83606;
  --tx-orange-800: #8A2905;
  --tx-orange-900: #4A1602;

  /* ---------- Primitive: Graphit ---------- */
  --tx-n-0:    #FFFFFF;
  --tx-n-25:   #FAFBFC;
  --tx-n-50:   #F4F6F9;
  --tx-n-100:  #EAEDF2;
  --tx-n-200:  #DBDFE7;
  --tx-n-300:  #C0C6D2;
  --tx-n-400:  #969DAD;
  --tx-n-500:  #6E7484;
  --tx-n-600:  #545A69;
  --tx-n-700:  #3B404C;
  --tx-n-800:  #272B34;
  --tx-n-850:  #1E212A;
  --tx-n-900:  #171A21;
  --tx-n-925:  #14161B;
  --tx-n-950:  #0E1014;
  --tx-n-1000: #08090C;

  /* ---------- Primitive: Effort-Hues — gesättigter ---------- */
  --tx-calm-300: #8DEBF7;
  --tx-calm-400: #35D2E6;
  --tx-calm-500: #0E8FA6;
  --tx-calm-600: #0E7A93;
  --tx-calm-700: #0A5A6D;

  --tx-peak-300: #FF9A8E;
  --tx-peak-400: #FF3B3B;
  --tx-peak-500: #D62828;
  --tx-peak-600: #C2181C;

  /* ---------- Primitive: Status ---------- */
  --tx-ok-400:   #4ADE80;
  --tx-ok-500:   #1FA455;
  --tx-ok-600:   #157F40;
  --tx-warn-400: #FBBF24;
  --tx-warn-500: #C98A05;
  --tx-warn-600: #9A6903;

  /* =================================================================
     Typografie — Sora für Display, Systemstack für Fließtext
     ================================================================= */
  --f-display: "Sora", system-ui, sans-serif; /* @kind font */
  --f-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               system-ui, sans-serif; /* @kind font */
  --f-data:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* @kind font */

  /* Type-Skala — Display größer und enger, Body unverändert */
  --t-hero-size:      56px; --t-hero-lh:      0.94; /* @kind font */ --t-hero-ls:      -0.035em; /* @kind font */ --t-hero-w: 600; /* @kind font */
  --t-display-size:   38px; --t-display-lh:   1.00; /* @kind font */ --t-display-ls:   -0.030em; /* @kind font */ --t-display-w: 600; /* @kind font */
  --t-title-size:     26px; --t-title-lh:     1.10; /* @kind font */ --t-title-ls:     -0.020em; /* @kind font */ --t-title-w: 600; /* @kind font */
  --t-heading-size:   22px; --t-heading-lh:   1.20; /* @kind font */ --t-heading-ls:   -0.015em; /* @kind font */ --t-heading-w: 600; /* @kind font */
  --t-body-size:      16px; --t-body-lh:      1.60; /* @kind font */ --t-body-ls:       0; /* @kind font */       --t-body-w: 400; /* @kind font */
  --t-bodys-size:     14.5px;--t-bodys-lh:    1.50; /* @kind font */ --t-bodys-ls:      0; /* @kind font */       --t-bodys-w: 400; /* @kind font */
  --t-label-size:     13px; --t-label-lh:     1.30; /* @kind font */ --t-label-ls:      0.14em; /* @kind font */  --t-label-w: 600; /* @kind font */
  --t-caption-size:   12px; --t-caption-lh:   1.32; /* @kind font */ --t-caption-ls:    0.02em; /* @kind font */  --t-caption-w: 500; /* @kind font */
  --t-eyebrow-size:   11px; --t-eyebrow-lh:   1.0; /* @kind font */  --t-eyebrow-ls:    0.20em; /* @kind font */  --t-eyebrow-w: 700; /* @kind font */
  --t-data-size:      13px; --t-data-lh:      1.2; /* @kind font */  --t-data-ls:       0.02em; /* @kind font */  --t-data-w: 500; /* @kind font */
  --t-numeral-size:   132px;--t-numeral-lh:   0.86; /* @kind font */ --t-numeral-ls:   -0.045em; /* @kind font */ --t-numeral-w: 600; /* @kind font */

  /* Display-Elemente laufen in Versalien */
  --t-display-case: uppercase; /* @kind font */

  /* =================================================================
     Space — 4px-Basis, unverändert
     ================================================================= */
  --s-1: 2px;   --s-2: 4px;   --s-3: 6px;   --s-4: 8px;
  --s-5: 12px;  --s-6: 16px;  --s-7: 20px;  --s-8: 24px;
  --s-9: 32px;  --s-10: 40px; --s-11: 56px; --s-12: 72px;

  /* Layout — mehr Luft */
  --gutter: 24px;
  --section-gap: 40px;
  --btn-h-sm: 44px;
  --btn-h-md: 56px;
  --btn-h-lg: 64px;
  --content-max: 560px;
  --nav-h: 66px;
  --tap-min: 48px;

  /* =================================================================
     Radius — flach. Alte Namen bleiben, damit nichts bricht.
     ================================================================= */
  --r-xs: 2px;  --r-s: 2px;   --r-m: 2px;
  --r-l: 2px;   --r-xl: 2px;  --r-pill: 999px;
  --r-hairline: 2px;

  /* Kanten-Abstand innerhalb von Gruppen (Kachel-Raster) */
  --seam: 2px;

  /* =================================================================
     Motion — etwas straffer
     ================================================================= */
  --e-out:   cubic-bezier(.16,.84,.34,1); /* @kind other */
  --e-inout: cubic-bezier(.65,0,.35,1); /* @kind other */
  --d-fast: 100ms; /* @kind other */
  --d-base: 180ms; /* @kind other */
  --d-slow: 300ms; /* @kind other */

  /* Z */
  --z-nav: 40; /* @kind other */ --z-sheet: 60; /* @kind other */ --z-timer: 90; /* @kind other */
}

/* =====================================================================
   DARK — Default
   ===================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --c-bg:           #08090B;
  --c-bg-sunken:    #050608;
  --c-surface:      #14171C;
  --c-surface-2:    #1C2028;
  --c-surface-3:    #2A2E38;
  --c-scrim:        rgba(6, 7, 10, .78);
  --c-glass:        rgba(20, 22, 27, .82);

  --c-border:        rgba(255, 255, 255, .09);
  --c-border-strong: rgba(255, 255, 255, .18);
  --c-border-inset:  rgba(255, 255, 255, .05);

  --c-text:    #F4F5F7;
  --c-text-2:  #98A0AC;
  --c-text-3:  #6E7684;
  --c-text-on-fill: #FFFFFF;

  --c-accent:        var(--tx-orange-500);
  --c-accent-hover:  #FF7A3D;
  --c-accent-press:  var(--tx-orange-600);
  --c-accent-text:   var(--tx-orange-500);
  --c-on-accent:     #190800;
  --c-accent-soft:   rgba(255, 92, 26, .14);
  --c-accent-soft-b: rgba(255, 92, 26, .32);

  --c-calm:        var(--tx-calm-400);
  --c-calm-soft:   rgba(53, 210, 230, .13);
  --c-calm-soft-b: rgba(53, 210, 230, .30);
  --c-on-calm:     #04222A;

  --c-peak:        var(--tx-peak-400);
  --c-peak-soft:   rgba(255, 59, 59, .13);
  --c-peak-soft-b: rgba(255, 59, 59, .30);
  --c-on-peak:     #FFFFFF;

  --c-ok:        var(--tx-ok-400);
  --c-ok-soft:   rgba(74, 222, 128, .13);
  --c-warn:      var(--tx-warn-400);
  --c-warn-soft: rgba(251, 191, 36, .13);
  --c-danger:    var(--tx-peak-400);

  --c-track:     rgba(255, 255, 255, .10);
  --c-focus:     var(--tx-orange-400);

  /* ---------- Verläufe: die neue Tiefen-Ebene ---------- */
  --g-page:      linear-gradient(175deg, #12151B 0%, #0A0B0D 38%, #08090B 100%);
  --g-surface:   linear-gradient(160deg, #1C2028 0%, #12151A 100%);
  --g-surface-2: linear-gradient(160deg, #15181E 0%, #0C0E12 100%);
  --g-accent:    linear-gradient(120deg, #FF7B39 0%, #FF5C1A 55%, #E44A0B 100%);
  --g-accent-lg: linear-gradient(135deg, #FF8A4C 0%, #FF5C1A 46%, #D23F05 100%);
  --g-calm:      linear-gradient(150deg, #6BE4F4 0%, #35D2E6 48%, #0E8FA6 100%);
  --g-peak:      linear-gradient(150deg, #FF7A6B 0%, #FF3B3B 48%, #C2181C 100%);
  /* Zeilen-Verläufe: Effort-Farbe links, Surface rechts */
  --g-row-accent: linear-gradient(100deg, #40220F 0%, #241D1B 34%, #14171C 78%);
  --g-row-calm:   linear-gradient(100deg, #0F303A 0%, #1A2228 34%, #14171C 78%);
  --g-row-peak:   linear-gradient(100deg, #3D161A 0%, #251A1D 34%, #14171C 78%);
  /* Punkte / Marker */
  --g-dot-accent: linear-gradient(140deg, #FFA36B 0%, #FF5C1A 55%, #C93B04 100%);
  --g-dot-calm:   linear-gradient(140deg, #8DEBF7 0%, #35D2E6 55%, #0B7F94 100%);
  --g-dot-peak:   linear-gradient(140deg, #FF9A8E 0%, #FF3B3B 55%, #B3151A 100%);

  /* ---------- Schatten entfallen ---------- */
  --sh-1: none;
  --sh-2: none;
  --sh-3: none;
  --sh-cta: none;
}

/* =====================================================================
   LIGHT — gleichwertig, gleiche Logik
   ===================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --c-bg:           #EEF1F5;
  --c-bg-sunken:    #E4E8EE;
  --c-surface:      #FFFFFF;
  --c-surface-2:    #F6F8FA;
  --c-surface-3:    #E7EAF0;
  --c-scrim:        rgba(20, 23, 29, .48);
  --c-glass:        rgba(255, 255, 255, .88);

  --c-border:        rgba(18, 22, 33, .11);
  --c-border-strong: rgba(18, 22, 33, .24);
  --c-border-inset:  rgba(18, 22, 33, .06);

  --c-text:    #14171D;
  --c-text-2:  #565E6B;
  --c-text-3:  #6B7280;
  --c-text-on-fill: #FFFFFF;

  --c-accent:        var(--tx-orange-500);
  --c-accent-hover:  var(--tx-orange-600);
  --c-accent-press:  var(--tx-orange-700);
  --c-accent-text:   var(--tx-orange-700);
  --c-on-accent:     #190800;
  --c-accent-soft:   #FFF0E7;
  --c-accent-soft-b: rgba(226, 70, 8, .28);

  --c-calm:        var(--tx-calm-600);
  --c-calm-soft:   #E4F6FA;
  --c-calm-soft-b: rgba(14, 122, 147, .26);
  --c-on-calm:     #FFFFFF;

  --c-peak:        var(--tx-peak-500);
  --c-peak-soft:   #FDECEC;
  --c-peak-soft-b: rgba(214, 40, 40, .24);
  --c-on-peak:     #FFFFFF;

  --c-ok:        var(--tx-ok-600);
  --c-ok-soft:   #E6F6EC;
  --c-warn:      var(--tx-warn-600);
  --c-warn-soft: #FCF3DC;
  --c-danger:    var(--tx-peak-500);

  --c-track:     rgba(18, 22, 33, .12);
  --c-focus:     var(--tx-orange-600);

  --g-page:      linear-gradient(175deg, #FFFFFF 0%, #F3F5F9 42%, #EEF1F5 100%);
  --g-surface:   linear-gradient(160deg, #FFFFFF 0%, #F4F6FA 100%);
  --g-surface-2: linear-gradient(160deg, #F8FAFC 0%, #EDF0F5 100%);
  --g-accent:    linear-gradient(120deg, #FF7B39 0%, #FF5C1A 55%, #E44A0B 100%);
  --g-accent-lg: linear-gradient(135deg, #FF8A4C 0%, #FF5C1A 46%, #D23F05 100%);
  --g-calm:      linear-gradient(150deg, #35D2E6 0%, #0E8FA6 52%, #0A5A6D 100%);
  --g-peak:      linear-gradient(150deg, #FF5A5A 0%, #D62828 52%, #A81317 100%);
  --g-row-accent: linear-gradient(100deg, #FFE7DA 0%, #FFF4EE 40%, #FFFFFF 78%);
  --g-row-calm:   linear-gradient(100deg, #DDF2F7 0%, #EFF8FA 40%, #FFFFFF 78%);
  --g-row-peak:   linear-gradient(100deg, #FCE2E2 0%, #FDF1F1 40%, #FFFFFF 78%);
  --g-dot-accent: linear-gradient(140deg, #FF9052 0%, #FF5C1A 55%, #C93B04 100%);
  --g-dot-calm:   linear-gradient(140deg, #35D2E6 0%, #0E8FA6 55%, #0A5A6D 100%);
  --g-dot-peak:   linear-gradient(140deg, #FF5A5A 0%, #D62828 55%, #A81317 100%);

  --sh-1: none;
  --sh-2: none;
  --sh-3: none;
  --sh-cta: none;
}

/* =====================================================================
   SYSTEM — greift, wenn kein data-theme gesetzt ist. Ergänzt in der App,
   weil der Kopf dieser Datei das zusagt, ohne es zu liefern. Gehört bei
   nächster Gelegenheit ins Design-System zurückgespielt.

   Die Werte sind identisch mit [data-theme="light"] oben; allein die
   Bedingung unterscheidet sich. :not([data-theme]) sorgt dafür, dass eine
   ausdrückliche Wahl im Profil immer schwerer wiegt als die Systemeinstellung.
   ===================================================================== */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --c-bg:           #EEF1F5;
    --c-bg-sunken:    #E4E8EE;
    --c-surface:      #FFFFFF;
    --c-surface-2:    #F6F8FA;
    --c-surface-3:    #E7EAF0;
    --c-scrim:        rgba(20, 23, 29, .48);
    --c-glass:        rgba(255, 255, 255, .88);

    --c-border:        rgba(18, 22, 33, .11);
    --c-border-strong: rgba(18, 22, 33, .24);
    --c-border-inset:  rgba(18, 22, 33, .06);

    --c-text:    #14171D;
    --c-text-2:  #565E6B;
    --c-text-3:  #6B7280;
    --c-text-on-fill: #FFFFFF;

    --c-accent:        var(--tx-orange-500);
    --c-accent-hover:  var(--tx-orange-600);
    --c-accent-press:  var(--tx-orange-700);
    --c-accent-text:   var(--tx-orange-700);
    --c-on-accent:     #190800;
    --c-accent-soft:   #FFF0E7;
    --c-accent-soft-b: rgba(226, 70, 8, .28);

    --c-calm:        var(--tx-calm-600);
    --c-calm-soft:   #E4F6FA;
    --c-calm-soft-b: rgba(14, 122, 147, .26);
    --c-on-calm:     #FFFFFF;

    --c-peak:        var(--tx-peak-500);
    --c-peak-soft:   #FDECEC;
    --c-peak-soft-b: rgba(214, 40, 40, .24);
    --c-on-peak:     #FFFFFF;

    --c-ok:        var(--tx-ok-600);
    --c-ok-soft:   #E6F6EC;
    --c-warn:      var(--tx-warn-600);
    --c-warn-soft: #FCF3DC;
    --c-danger:    var(--tx-peak-500);

    --c-track:     rgba(18, 22, 33, .12);
    --c-focus:     var(--tx-orange-600);

    --g-page:      linear-gradient(175deg, #FFFFFF 0%, #F3F5F9 42%, #EEF1F5 100%);
    --g-surface:   linear-gradient(160deg, #FFFFFF 0%, #F4F6FA 100%);
    --g-surface-2: linear-gradient(160deg, #F8FAFC 0%, #EDF0F5 100%);
    --g-accent:    linear-gradient(120deg, #FF7B39 0%, #FF5C1A 55%, #E44A0B 100%);
    --g-accent-lg: linear-gradient(135deg, #FF8A4C 0%, #FF5C1A 46%, #D23F05 100%);
    --g-calm:      linear-gradient(150deg, #35D2E6 0%, #0E8FA6 52%, #0A5A6D 100%);
    --g-peak:      linear-gradient(150deg, #FF5A5A 0%, #D62828 52%, #A81317 100%);
    --g-row-accent: linear-gradient(100deg, #FFE7DA 0%, #FFF4EE 40%, #FFFFFF 78%);
    --g-row-calm:   linear-gradient(100deg, #DDF2F7 0%, #EFF8FA 40%, #FFFFFF 78%);
    --g-row-peak:   linear-gradient(100deg, #FCE2E2 0%, #FDF1F1 40%, #FFFFFF 78%);
    --g-dot-accent: linear-gradient(140deg, #FF9052 0%, #FF5C1A 55%, #C93B04 100%);
    --g-dot-calm:   linear-gradient(140deg, #35D2E6 0%, #0E8FA6 55%, #0A5A6D 100%);
    --g-dot-peak:   linear-gradient(140deg, #FF5A5A 0%, #D62828 55%, #A81317 100%);

    --sh-1: none;
    --sh-2: none;
    --sh-3: none;
    --sh-cta: none;
  }
}