/* =====================================================================
   Reisekosten-Web-App — Design Tokens
   Stiftung Sunnitischer Schulrat – Stiftung des öffentlichen Rechts
   Abgeleitet aus dem Styleguide (Markenfarben + Open Sans).
   Hinweis: Abgedunkelte/aufgehellte Abstufungen sind barrierekonforme
   Ableitungen derselben Farbfamilie (WCAG AA), nicht neue Markenfarben.
   ===================================================================== */

:root {
  /* --- Markenfarben (verbindlich, Styleguide) ------------------------ */
  --color-emerald:    #00BD8F;   /* Hauptakzent: Aktionen, aktive Nav, positiv */
  --color-black:      #000000;
  --color-white:      #FFFFFF;
  --color-aztec-gold: #FBDA56;   /* Hinweise, offene Aufgaben, Rückfragen */
  --color-dark-gray:  #A9AAAA;   /* Sekundär, Linien, deaktiviert */

  /* --- Abgeleitete, barrierekonforme Abstufungen --------------------- */
  --color-emerald-ink:   #00785C; /* grüner Text auf Weiß (AA) */
  --color-emerald-hover: #00A47C; /* Button-Hover */
  --color-emerald-active:#008E6C;
  --color-emerald-soft:  #E6F8F3; /* grüne Flächen-Tönung (Badges/Banner) */
  --color-gold-soft:     #FEF6D9; /* Hinweis-Fläche */
  --color-gold-ink:      #7A5B00; /* Text auf Goldfläche (AA) */
  --color-danger:        #C0362C; /* dezentes, barrierearmes Fehlerrot */
  --color-danger-soft:   #FBEAE8;
  --color-info-ink:      #2A4B57; /* neutral-blau für „in Prüfung“ */
  --color-info-soft:     #EAF1F4;

  /* --- Text ---------------------------------------------------------- */
  --text-strong:     #000000;
  --text-default:    #1A1A1A;
  --text-muted:      #5F6060;     /* dunkler als #A9AAAA für AA als Text */
  --text-on-emerald: #FFFFFF;
  --text-disabled:   #A9AAAA;

  /* --- Flächen ------------------------------------------------------- */
  --surface-page:  #F7F8F8;
  --surface-card:  #FFFFFF;
  --surface-sunken:#EFF1F1;
  --border-subtle: #E6E7E7;
  --border-strong: #D2D4D4;

  /* --- Typografie ---------------------------------------------------- */
  --font-primary: "Open Sans", Arial, Helvetica, sans-serif;
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-display: 28px;  /* Bold  – große Headline */
  --fs-h1:      22px;  /* Bold */
  --fs-h2:      18px;  /* Semibold */
  --fs-body:    16px;  /* Regular – UI-Standard */
  --fs-sm:      14px;
  --fs-xs:      12px;

  --lh-tight: 1.25;
  --lh-body:  1.5;

  /* --- Radius -------------------------------------------------------- */
  --radius-card:   16px;
  --radius-button: 12px;
  --radius-input:  12px;
  --radius-pill:   999px;

  /* --- Abstände (8px-Raster) ---------------------------------------- */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;

  /* --- Schatten (dezent, statt Rahmen) ------------------------------ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.10);
  --focus-ring: 0 0 0 3px rgba(0,189,143,.35); /* sichtbarer Fokus */

  /* --- Motion (subtil, nie verspielt) ------------------------------- */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease: cubic-bezier(.2,.7,.3,1);

  /* --- Layout -------------------------------------------------------- */
  --tap-min:      48px;   /* Mindest-Touchfläche */
  --bottomnav-h:  64px;
  --sidebar-w:    256px;
  --content-max:  1200px;
}

/* --- Dunkler Modus: weiße Logovariante verwenden ---------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-page:   #0E1110;
    --surface-card:   #171A19;
    --surface-sunken: #1F2322;
    --border-subtle:  #262A29;
    --border-strong:  #313635;

    --text-strong:  #FFFFFF;
    --text-default: #ECEEED;
    --text-muted:   #A9AAAA;

    --color-emerald-ink:   #3FD9B4; /* heller für Kontrast auf dunkel */
    --color-emerald-soft:  #12302A;
    --color-gold-soft:     #2E2810;
    --color-gold-ink:      #F2D777;
    --color-danger-soft:   #2C1714;
    --color-info-soft:     #14242A;
  }
}

/* Nutzerpräferenz „weniger Bewegung“ respektieren */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; }
}

/* =====================================================================
   Beispielhafte Basisklassen (Auszug der Komponentenbibliothek)
   ===================================================================== */

body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-default);
  background: var(--surface-page);
}

.card {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-lg);
}

.btn {
  min-height: var(--tap-min);
  padding: 0 var(--spacing-lg);
  border-radius: var(--radius-button);
  font-weight: var(--fw-semibold);
  border: 0;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn--primary { background: var(--color-emerald); color: var(--text-on-emerald); }
.btn--primary:hover { background: var(--color-emerald-hover); }
.btn--primary:active { background: var(--color-emerald-active); }

.btn--secondary {
  background: transparent; color: var(--color-emerald-ink);
  border: 1px solid var(--border-strong);
}

/* Status-Badge: immer Icon + Text + Farbe (nie Farbe allein) */
.badge {
  display: inline-flex; align-items: center; gap: var(--spacing-xs);
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.badge--ok      { background: var(--color-emerald-soft); color: var(--color-emerald-ink); }
.badge--open    { background: var(--color-gold-soft);    color: var(--color-gold-ink); }
.badge--review  { background: var(--color-info-soft);    color: var(--color-info-ink); }
.badge--error   { background: var(--color-danger-soft);  color: var(--color-danger); }
.badge--neutral { background: var(--surface-sunken);     color: var(--text-muted); }