/* Stocker PWA — Design Tokens
   Alle Werte des Neuentwurfs als CSS-Custom-Properties.
   Keine externen Ressourcen, keine Frameworks. */

:root {
  /* ---- Farben: Flächen ---- */
  --st-bg:              #0A0C0F;
  --st-bg-deep:         #07080A;
  --st-surface:         #101318;
  --st-surface-raised:  #14181D;
  --st-surface-dial:    #161B21;
  --st-surface-hover:   #151A20;
  --st-surface-accent:  #15100F;

  /* ---- Farben: Ränder ---- */
  --st-border:          rgba(255,255,255,.07);
  --st-border-strong:   rgba(255,255,255,.10);
  --st-border-stronger: rgba(255,255,255,.14);
  --st-border-accent:   rgba(255,69,36,.32);
  --st-border-warn:     rgba(255,193,77,.30);

  /* ---- Farben: Marke ---- */
  --st-accent:          #FF4524;
  --st-accent-press:    #E63317;
  --st-accent-soft:     rgba(255,69,36,.16);
  --st-accent-faint:    rgba(255,69,36,.08);
  --st-accent-text:     #FF7A5E;
  --st-accent-link:     #FF6A4D;

  /* ---- Farben: Text ---- */
  --st-text:            #F2F4F7;
  --st-text-mid:        #C8CDD4;
  --st-text-dim:        #8A929C;
  --st-text-faint:      #6B737D;
  --st-text-faintest:   #5C646E;
  --st-text-on-accent:  #FFFFFF;
  --st-text-on-warn:    #1B1405;

  /* ---- Farben: Status ---- */
  --st-success:         #34D399;
  --st-success-soft:    rgba(52,211,153,.14);
  --st-success-border:  rgba(52,211,153,.35);
  --st-warning:         #FFC14D;
  --st-warning-soft:    rgba(255,193,77,.14);
  --st-info:            #7FB2FF;
  --st-info-soft:       rgba(127,178,255,.14);
  --st-danger:          #FF5A5A;
  --st-danger-soft:     rgba(255,90,90,.14);
  --st-neutral:         #8A929C;
  --st-neutral-soft:    rgba(138,146,156,.14);

  /* ---- Verläufe ---- */
  --st-grad-login:      radial-gradient(90% 60% at 50% 0%, #1B1114 0%, #0A0C0F 65%);
  --st-grad-now:        linear-gradient(160deg, #24120E 0%, #14181D 55%);
  --st-grad-warn:       linear-gradient(160deg, #241C0D 0%, #14181D 60%);
  --st-grad-map:        linear-gradient(140deg, #12171C, #1B2027);
  --st-grad-scrim:      linear-gradient(to top, #0A0C0F 0%, #0A0C0F 72%, transparent 100%);
  --st-grad-sweep:      linear-gradient(90deg, transparent, rgba(255,69,36,.35), transparent);
  --st-grid-line:       rgba(255,255,255,.045);

  /* ---- Schrift ---- */
  --st-font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --st-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --st-fw-regular: 400;
  --st-fw-medium:  500;
  --st-fw-semi:    600;
  --st-fw-bold:    700;
  --st-fw-black:   800;

  --st-fs-mono-xs:  10px;   /* Sektionslabel, Meta */
  --st-fs-mono-sm:  11px;   /* Chips, Kennungen */
  --st-fs-mono-md:  12px;   /* Zeiten in Listen */
  --st-fs-mono-lg:  20px;   /* Kennzahlen */
  --st-fs-mono-xl:  22px;   /* Timer */
  --st-fs-mono-2xl: 34px;   /* Stempeluhr-Ticker */

  --st-fs-xs:   11px;
  --st-fs-sm:   12px;
  --st-fs-sm2:  12.5px;
  --st-fs-base: 13.5px;
  --st-fs-md:   15px;
  --st-fs-lg:   16px;
  --st-fs-xl:   17px;
  --st-fs-2xl:  20px;
  --st-fs-3xl:  22px;
  --st-fs-4xl:  26px;
  --st-fs-5xl:  27px;
  --st-fs-6xl:  44px;

  --st-lh-tight: 1.15;
  --st-lh-snug:  1.3;
  --st-lh-body:  1.45;
  --st-lh-loose: 1.55;

  --st-ls-tight:  -.02em;
  --st-ls-tighter:-.03em;
  --st-ls-label:  .10em;
  --st-ls-meta:   .16em;
  --st-ls-section:.26em;
  --st-ls-brand:  .34em;

  /* ---- Abstände ---- */
  --st-sp-1:  4px;
  --st-sp-2:  6px;
  --st-sp-3:  8px;
  --st-sp-4:  10px;
  --st-sp-5:  12px;
  --st-sp-6:  14px;
  --st-sp-7:  16px;
  --st-sp-8:  18px;
  --st-sp-9:  20px;
  --st-sp-10: 22px;
  --st-sp-12: 28px;
  --st-gutter: 20px;          /* horizontaler Screen-Rand */
  --st-scroll-bottom: 170px;  /* Freiraum über Puck + Scrim */

  /* ---- Radien ---- */
  --st-r-sm:   12px;
  --st-r-md:   14px;
  --st-r-lg:   16px;
  --st-r-xl:   18px;
  --st-r-2xl:  20px;
  --st-r-3xl:  22px;
  --st-r-4xl:  24px;
  --st-r-pill: 999px;
  --st-r-circle: 50%;

  /* ---- Schatten ---- */
  --st-shadow-card:  0 20px 50px rgba(0,0,0,.40);
  --st-shadow-accent:0 14px 34px rgba(255,69,36,.32);
  --st-shadow-mic:   0 10px 26px rgba(255,69,36,.34);
  --st-shadow-puck:  0 16px 40px rgba(0,0,0,.55), 0 0 0 8px rgba(255,69,36,.08);
  --st-shadow-sheet: 0 -20px 60px rgba(0,0,0,.6);

  /* ---- Trefferflächen ---- */
  --st-tap-min:     44px;
  --st-btn-h:       46px;
  --st-btn-h-lg:    60px;
  --st-btn-h-sm:    40px;
  --st-icon-btn:    46px;
  --st-icon-btn-sm: 38px;
  --st-field-h:     52px;
  --st-puck:        68px;
  --st-dial-item:   74px;
  --st-dial-h:      250px;
  --st-scrim-h:     118px;
  --st-avatar:      40px;
  --st-avatar-lg:   60px;

  /* ---- Motion ---- */
  --st-dur-fast:   .18s;
  --st-dur-base:   .26s;
  --st-dur-screen: .30s;
  --st-dur-rise:   .35s;
  --st-ease:       ease;
  --st-stagger:    35ms;

  /* ---- Ebenen ---- */
  --st-z-scrim:   1;
  --st-z-puckbar: 2;
  --st-z-dial:    3;
  --st-z-overlay: 10;
  --st-z-toast:   20;
}

/* Schriften (Archivo + JetBrains Mono) werden selbstgehostet über st-fonts.css
   geladen (Google-Subsets, DSGVO-konform, kein CDN zur Laufzeit). */