/* ============================================================
   batOS · HubPage Framework — TOKEN CONTRACT
   White-Label: alle Farben/Maße sind Rollen-Tokens, kein Hardcode.
   Rollen: Surface / Ink / Accent / Status / Line+Elevation
   + Radius-, Spacing-, Typo-, Dichte-Skalen.
   Dark-Mode-ready: Rollen sind getrennt nach Surface vs Ink vs Akzent,
   sodass spätere Dark-Themes nur die Rollen-Werte tauschen müssen.
   ============================================================ */

/* ---- Geteilte Skalen (richtungsunabhängig) ---- */
:root {
  /* 8pt-Spacing-Rhythmus */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --motion-fast: 120ms; --motion-mid: 200ms;
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ════════════════════════════════════════════════════════════
   RICHTUNG F — „Flat" (Vorbild Docker Desktop)
   Achsen: reinweiß & flach · Hairlines statt Karten ·
           Schatten NUR als Wegweiser (aktiver Tab/Segment) ·
           Buttons 100% Pill · Tabs wie B · Modal wie D · Typo Public Sans.
   ════════════════════════════════════════════════════════════ */
.dir-f {
  --font-sans: "Public Sans", system-ui, sans-serif;
  --font-num: "Public Sans", system-ui, sans-serif;

  --surface-app:    #FFFFFF;
  --surface-card:   #FFFFFF;
  --surface-rail:   #FFFFFF;
  --surface-sunken: #ECECEC;
  --surface-hover:  #F4F6F8;
  --surface-modal:  #FFFFFF;
  --surface-scrim:  rgba(15,23,42,.32);
  --rail-ink:        #5B6573;
  --rail-ink-strong: #0F1729;
  --rail-active-bg:  var(--accent-weak);

  --ink-strong: #0F1729;
  --ink:        #33404F;
  --ink-muted:  #5B6573;
  --ink-subtle: #9AA3AF;
  --ink-on-accent: #FFFFFF;

  /* EIN System-Blau — Hover/Press/Text/Weak/Border werden daraus abgeleitet (kein zweites Blau) */
  --accent:        #0E63D6;
  --accent-hover:  color-mix(in srgb, var(--accent) 88%, #000);
  --accent-press:  color-mix(in srgb, var(--accent) 76%, #000);
  --accent-ink:    var(--accent);
  --accent-weak:   color-mix(in srgb, var(--accent) 12%, #fff);
  --accent-border: color-mix(in srgb, var(--accent) 34%, #fff);

  --ok: #1E874B;      --ok-weak: #E3F3E9;     --ok-ink: #15663A;
  --warn: #B5710E;    --warn-weak: #FBEFD9;   --warn-ink: #80500A;
  --danger: #D23B33;  --danger-weak: #FBE7E5; --danger-ink: #A0271F;
  --info: var(--accent);    --info-weak: var(--accent-weak);   --info-ink: var(--accent);
  --neutral: #5B6573; --neutral-weak: #ECECEC;--neutral-ink: #33404F;

  --border:        #E4E7EC;
  --border-strong: #D3D8DF;
  --border-subtle: #ECECEC;
  --ring: var(--accent);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-cue: 0 1px 2px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.08);
  --shadow-lg: 0 16px 44px rgba(15,23,42,.20);

  --r-xs: 5px; --r-sm: 6px; --r-md: 8px; --r-lg: 8px; --r-pill: 999px;

  --card-pad: 24px; --section-pad: 16px;
  --row-h: 52px; --control-h: 40px; --control-pad-x: 16px;
  --stack-gap: 16px; --rail-w: 64px; --sidebar-w: 320px;

  --t-display: 30px; --lh-display: 36px;
  --t-h1: 24px; --lh-h1: 30px;
  --t-h2: 17px; --lh-h2: 23px;
  --t-h3: 14px; --lh-h3: 20px;
  --t-body: 14px; --lh-body: 21px;
  --t-sm: 13px; --lh-sm: 18px;
  --t-xs: 11.5px; --lh-xs: 15px;
  --ls-tight: -0.01em; --ls-label: 0.02em;
}

/* ════════════════════════════════════════════════════════════
   TENANT-PRESETS (White-Label-Beweis)
   Überschreiben NUR die Akzent-Rolle über alle Richtungen hinweg.
   Spezifität :root[data-tenant] .dir-* (0,2,1) schlägt .dir-* (0,1,0),
   sodass jede Richtung ihre Struktur behält, aber den Mandanten-Akzent trägt.
   ════════════════════════════════════════════════════════════ */
:root[data-tenant="stadtwerke"] .dir-f {
  --accent:#1F7A4D; --accent-hover:#1A6A42; --accent-press:#155838;
  --accent-ink:#16683C; --accent-weak:#E5F3EB; --accent-border:#BCDFCB;
}
:root[data-tenant="medcampus"] .dir-f {
  --accent:#1763C9; --accent-hover:#1457B4; --accent-press:#114B9C;
  --accent-ink:#125AB8; --accent-weak:#E4EDFB; --accent-border:#B9D0F1;
}
:root[data-tenant="hanse"] .dir-f {
  --accent:#B23A6B; --accent-hover:#9E3360; --accent-press:#8A2B53;
  --accent-ink:#9A2F5C; --accent-weak:#FBE9F1; --accent-border:#EDC2D6;
}
:root[data-tenant="graphit"] .dir-f {
  --accent:#353C49; --accent-hover:#2B313C; --accent-press:#21262F;
  --accent-ink:#2E353F; --accent-weak:#ECEEF1; --accent-border:#CFD4DB;
}