/* ==========================================================================
   UnixX HR - Gestaltungsvariablen
   Helle, ruhige Business-Optik: viel Weissraum, feine Linien, schwarze
   Akzente. Warme Grautoene statt blaustichiger - das wirkt weniger technisch
   und passt zu einem Personalprogramm.
   Es werden ausschliesslich Systemschriften verwendet: keine Schriftdatei,
   kein externer Abruf, damit auch offline und ohne Internet alles gleich
   aussieht.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Flaechen ---- */
  --c-canvas:      #fbfaf9;
  --c-surface:     #ffffff;
  --c-surface-2:   #f6f4f2;
  --c-surface-3:   #efece8;
  --c-overlay:     rgba(20, 18, 15, .34);

  /* ---- Linien ---- */
  --c-line:        #e7e4e0;
  --c-line-strong: #d6d1ca;

  /* ---- Schrift ---- */
  --c-ink:         #14120f;
  --c-body:        #3f3931;
  --c-muted:       #8a8279;
  --c-faint:       #b4aca2;

  /* ---- Akzent ---- */
  --c-accent:       #14120f;
  --c-accent-hover: #2e2a24;
  --c-accent-ink:   #ffffff;
  --c-focus:        #7a6047;
  --c-link:         #7a6047;

  /* ---- Statusfarben (weiche Pillen wie in Personio) ---- */
  --c-ok-bg:      #dcf0e3;  --c-ok-ink:      #1e6440;
  --c-warn-bg:    #fbeed2;  --c-warn-ink:    #855c12;
  --c-err-bg:     #fbe3e4;  --c-err-ink:     #9c2f38;
  --c-info-bg:    #e3ecf6;  --c-info-ink:    #2a5a86;
  --c-neutral-bg: #efece8;  --c-neutral-ink: #5f584f;

  /* ---- Signalfarben fuer Diagramme und Kalender ---- */
  --c-urlaub:     #2f7d5c;
  --c-krank:      #c2504b;
  --c-sonstige:   #5b6ea8;
  --c-wochenende: #f4f1ed;
  --c-feiertag:   #f7efe4;
  --c-heute:      #14120f;

  /* ---- Typografie ---- */
  --f-sans: system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --fs-xs:   0.6875rem;  /* 11px - Tabellenkopf, Marken */
  --fs-sm:   0.75rem;    /* 12px - Hilfstexte */
  --fs-md:   0.8125rem;  /* 13px - dichte Tabellen */
  --fs-base: 0.875rem;   /* 14px - Grundtext */
  --fs-lg:   1rem;       /* 16px */
  --fs-xl:   1.25rem;    /* 20px - Kartenueberschrift */
  --fs-2xl:  1.625rem;   /* 26px - Seitentitel */
  --fs-3xl:  2.25rem;    /* 36px - Begruessung */

  --lh-eng:   1.25;
  --lh-normal: 1.5;

  /* ---- Abstaende ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;

  /* ---- Radien ---- */
  --r-sm:   6px;
  --r:      8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 999px;

  /* ---- Schatten: bewusst sehr flach ---- */
  --sh-1: 0 1px 2px rgba(20, 18, 15, .05);
  --sh-2: 0 2px 8px rgba(20, 18, 15, .06), 0 1px 2px rgba(20, 18, 15, .04);
  --sh-3: 0 16px 40px rgba(20, 18, 15, .14), 0 2px 8px rgba(20, 18, 15, .06);

  /* ---- Layout ---- */
  --sidebar-w:    236px;
  --header-h:     60px;
  --seite-max:    1440px;
  --seite-padd:   clamp(16px, 3vw, 40px);

  --ease: cubic-bezier(.2, .6, .35, 1);
  /* Leichtes Ueberschwingen fuer das Zurueckfedern nach einem Druck.
     Nicht verspielt gemeint - es macht den Unterschied zwischen "reagiert"
     und "fuehlt sich an wie eine Taste". */
  --ease-feder: cubic-bezier(.34, 1.56, .64, 1);
  --dauer: 160ms;
  --dauer-feder: 260ms;

  /* Wie stark eine Flaeche beim Druck nachgibt. Klein halten: sichtbar,
     aber nicht albern. */
  --druck: .97;
  --druck-klein: .94;   /* fuer kleine Ziele, dort waere .97 unsichtbar */
}

/* Der weiche Pastellverlauf der Startseite - das optische Erkennungsmerkmal. */
.verlauf-startseite {
  background:
    radial-gradient(90% 70% at 8% 0%,   #e8f3e6 0%, transparent 58%),
    radial-gradient(80% 60% at 92% 4%,  #fbe9d8 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 100%, #f6e4ec 0%, transparent 62%),
    var(--c-canvas);
}

/* Wer im Betriebssystem "Bewegung reduzieren" gesetzt hat, bekommt keine.
   Das ist keine Geschmacksfrage: Bewegung kann bei vestibulaeren
   Beschwerden Uebelkeit ausloesen. Der Druckeffekt entfaellt dann ebenfalls,
   die Rueckmeldung uebernehmen Farbe und Rahmen. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dauer: 1ms;
    --dauer-feder: 1ms;
    --druck: 1;
    --druck-klein: 1;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}