/* =============================================================================
 * tokens.css — Design-Tokens (Design-System v2 "Glut")
 * -----------------------------------------------------------------------------
 * CSS-Custom-Properties fuer Farben, Schatten, Radien, Typografie. Wird
 * VOR app.css (Tailwind-Output) geladen, damit die Tailwind-@theme-Regeln
 * die hier definierten Variablen referenzieren koennen.
 *
 * Konvention:
 *   --ff-<kategorie>-<rolle>           = Standardwert
 *   :root.dark { --ff-... = ... }      = Dark-Mode-Override
 *
 * Aenderungen hier muessen mit dem @theme-Block in
 *   src/main/frontend/css/input.css
 * synchron gehalten werden (siehe docs/architektur/04-design-system.md).
 *
 * Design-System v2 (Stand 23.05.2026) — siehe ebd. fuer Begruendungen:
 *   - Akzent "Glut" (Bernstein/Amber) statt Feuerwehr-Rot
 *   - Drei-Stufen-Radien-Trias (10px / 6px / 999px)
 *   - Mono fuer Zahlen, Sans fuer Text, OpenType tnum + zero + ss01
 *   - Dark Mode als Default-Erlebnis
 * ===========================================================================*/

:root {
  /* ---------------------------------------------------------------------
   * Farben — Light Mode (Glut-Palette)
   * "bg" = Flaechenhintergrund, "fg" = Schrift, "border" = Linien,
   * "accent" = Glut, "success/warning/danger" = semantischer Status.
   * ------------------------------------------------------------------- */
  --ff-bg-base:     #FAFAF6;   /* warm-leicht-gelblich, Seitenhintergrund */
  --ff-bg-elevated: #FFFFFF;   /* Karten, Modale, Header */
  --ff-bg-subtle:   #F5F5EF;   /* Hover, alternierende Zeilen */
  --ff-bg-overlay:  rgba(20, 17, 14, 0.55); /* Modal-Backdrop */

  --ff-text-primary:   #1A1816;
  --ff-text-secondary: #3F3D38;
  --ff-text-muted:     #6B6962;
  --ff-text-on-accent: #FFFFFF;

  --ff-border:        #E7E5DE;
  --ff-border-strong: #D6D3CA;
  --ff-border-focus:  #B8541A;

  --ff-accent:        #B8541A;   /* Glut, Primary */
  --ff-accent-hover:  #9F4514;
  --ff-accent-subtle: #F4D9C0;   /* helles Glut-Wash fuer Backgrounds */

  --ff-success:        #4F7A3A;
  --ff-success-subtle: #E8F1DC;
  --ff-warning:        #C2820F;
  --ff-warning-subtle: #FBEFC9;
  --ff-danger:         #B33A2D;
  --ff-danger-subtle:  #F6DAD3;

  /* Saldo-spezifisch — neutral solange Saldo nicht-negativ ist,
   * Danger nur bei echtem Minus (UX-Politik in 04-design-system.md
   * Abschnitt 2.1). */
  --ff-saldo-positiv: var(--ff-text-primary);
  --ff-saldo-negativ: #B33A2D;
  --ff-saldo-null:    var(--ff-text-primary);

  /* ---------------------------------------------------------------------
   * Schatten — minimal, zwei Stufen
   * ------------------------------------------------------------------- */
  --ff-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ff-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --ff-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10);
  --ff-shadow-focus: 0 0 0 3px rgba(184, 84, 26, 0.30); /* Glut-Ring */

  /* ---------------------------------------------------------------------
   * Radien — Drei-Stufen-Trias
   *   xs (4px)  — interne Pillen (z.B. Tag-Buttons in Tabellen)
   *   md (6px)  — Inputs / Buttons innerhalb von Cards
   *   lg (10px) — Cards, Kacheln, aeussere Elemente
   *   full      — Pill-Buttons, Tabs
   * Die Drei-Stufung 10/6/Pill ist die Wiedererkennungs-Quirk des
   * Design-Systems. Bitte konsequent durchziehen, nicht freie Werte
   * verwenden.
   * ------------------------------------------------------------------- */
  --ff-radius-xs:   0.25rem;  /* 4px */
  --ff-radius-md:   0.375rem; /* 6px */
  --ff-radius-lg:   0.625rem; /* 10px */
  --ff-radius-xl:   0.875rem; /* 14px - selten, nur Modal/Hero */
  --ff-radius-full: 9999px;

  /* ---------------------------------------------------------------------
   * Z-Index-Skala — diskret, damit keine "z-index: 9999" entstehen
   * ------------------------------------------------------------------- */
  --ff-z-base:          0;
  --ff-z-sticky:        10;
  --ff-z-dropdown:      20;
  --ff-z-toast:         30;
  --ff-z-modal:         40;
  --ff-z-modal-content: 50;

  /* ---------------------------------------------------------------------
   * Typografie — Familien
   * Geist Sans fuer Lesetext, Geist Mono fuer Zahlen / Stammnummern /
   * Timestamps. Variable Fonts (eine .woff2 fuer alle Gewichte).
   * ------------------------------------------------------------------- */
  --ff-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* OpenType-Features fuer numerische Inhalte:
   *   tnum = Tabular Numbers (gleiche Breite pro Ziffer, fuer Spalten)
   *   zero = Slashed Zero (Null mit Strich, gegen Verwechslung mit "O")
   *   ss01 = Stilistic Set 1 (Geist-spezifische Alt-Glyphen) */
  --ff-numeric-feature-settings: "tnum", "zero", "ss01";

  /* Animations-Tempo — zentral, damit "ease" und Dauer konsistent bleiben.
   * Wird in animations.js + Tailwind-Transition-Klassen referenziert.
   * Respektiert prefers-reduced-motion via Override unten. */
  --ff-anim-duration-quick:  120ms;  /* Tap-Feedback */
  --ff-anim-duration-medium: 220ms;  /* Toast-Slide */
  --ff-anim-duration-long:   400ms;  /* Number-Roll */
  --ff-anim-easing:          cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart */
}

/* ---------------------------------------------------------------------------
 * Dark Mode Overrides (Selektor :root.dark, Specificity 0,1,0)
 * theme.js setzt die .dark-Klasse beim Start (siehe FOUC-Pflicht im
 * <head>-Skript-Block). Wegen Marvins Hauptbenutzung im Geraetehaus
 * (Abend, Tablet) ist Dark Mode der Default — siehe theme.js.
 * ------------------------------------------------------------------------- */
:root.dark {
  --ff-bg-base:     #14110E;   /* warmes fast-Schwarz */
  --ff-bg-elevated: #1C1916;
  --ff-bg-subtle:   #25211C;
  --ff-bg-overlay:  rgba(0, 0, 0, 0.7);

  --ff-text-primary:   #F2EFE8;
  --ff-text-secondary: #C8C4BC;
  --ff-text-muted:     #94908A;
  --ff-text-on-accent: #FFFFFF;

  --ff-border:        #2E2A24;
  --ff-border-strong: #3D3933;
  --ff-border-focus:  #E5793A;

  --ff-accent:        #E5793A;   /* Glut, heller im Dark fuer Kontrast */
  --ff-accent-hover:  #F08C50;
  --ff-accent-subtle: #3A2618;

  --ff-success:        #7AAC5F;
  --ff-success-subtle: #1F2D17;
  --ff-warning:        #D9A53D;
  --ff-warning-subtle: #322610;
  --ff-danger:         #D85A4A;
  --ff-danger-subtle:  #3A1812;

  --ff-saldo-positiv: var(--ff-text-primary);
  --ff-saldo-negativ: #D85A4A;
  --ff-saldo-null:    var(--ff-text-primary);

  --ff-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --ff-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
  --ff-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65);
  --ff-shadow-focus: 0 0 0 3px rgba(229, 121, 58, 0.40);
}

/* ---------------------------------------------------------------------------
 * Reduced Motion — globaler Schalter
 * Wenn der User per OS-Einstellung sagt "weniger Bewegung", schalten
 * wir alle Animations-Custom-Properties auf 0ms. Effekt: number-roll
 * cross-faded, tap-feedback springt sofort, countdown-ring fuellt
 * sofort (Pflicht-Pause bleibt aber sichtbar, weil sie zeit-relevant
 * ist). Implementation auch in animations.js gespiegelt — die Property
 * hier ist die Single Source of Truth.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ff-anim-duration-quick:  0ms;
    --ff-anim-duration-medium: 0ms;
    --ff-anim-duration-long:   0ms;
  }
}

/* ---------------------------------------------------------------------------
 * Font-Face Deklarationen — Variable Fonts (eine .woff2 ueberdeckt
 * Gewichtsbereich 100..900, Browser interpoliert).
 * font-display: swap — Geist faedet weich rein, kein FOIT (Flash of
 * Invisible Text) wenn die Schrift langsam laedt.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-sans-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
 * Globale Basis-Defaults — bewusst minimal. Tailwinds Preflight macht den
 * Rest.
 * ------------------------------------------------------------------------- */
html {
  font-family: var(--ff-font-sans);
  background-color: var(--ff-bg-base);
  color: var(--ff-text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--ff-bg-base);
  color: var(--ff-text-primary);
  min-height: 100vh;
  /* Grain-Overlay als Hintergrund-Texture. Sehr leise (opacity ueber
   * den SVG-feedComposite-Wert), nimmt der App den CSS-frischen Look.
   * Datei liegt unter /img/grain.svg, 200x200 px tile. */
  background-image: url("/img/grain.svg");
  background-repeat: repeat;
  background-attachment: fixed;
}

/* Mono-Klasse mit aktivierten OpenType-Features fuer numerische Inhalte */
.font-mono,
.font-numeric {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  -webkit-font-feature-settings: var(--ff-numeric-feature-settings);
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Saldo-spezifische Hilfsklassen — semantisch, keine Tailwind-Aliasse */
.saldo-positiv { color: var(--ff-saldo-positiv); }
.saldo-negativ { color: var(--ff-saldo-negativ); }
.saldo-null    { color: var(--ff-saldo-null); }

/* ---------------------------------------------------------------------------
 * Typografie-Skala
 * Klassen fuer Display- und Mono-Skalen aus 04-design-system.md Abschnitt 2.3.
 * Bewusst als Komponenten-Klassen, nicht als Tailwind-Tokens — die Skala ist
 * fuer den Stack der App, nicht fuer die Tailwind-Default-Skala.
 * ------------------------------------------------------------------------- */
.ff-display-xl { font-size: 3rem;    line-height: 3.25rem; letter-spacing: -0.025em; font-weight: 600; }
.ff-display-l  { font-size: 2.25rem; line-height: 2.5rem;  letter-spacing: -0.02em;  font-weight: 600; }
.ff-h1         { font-size: 1.5rem;  line-height: 2rem;    font-weight: 600; }
.ff-h2         { font-size: 1.125rem;line-height: 1.5rem;  font-weight: 600; }

.ff-mono-xl    { font-family: var(--ff-font-mono); font-feature-settings: var(--ff-numeric-feature-settings); font-size: 2rem;     line-height: 2.25rem; font-weight: 600; }
.ff-mono-l     { font-family: var(--ff-font-mono); font-feature-settings: var(--ff-numeric-feature-settings); font-size: 1.25rem;  line-height: 1.75rem; font-weight: 500; }
.ff-mono-m     { font-family: var(--ff-font-mono); font-feature-settings: var(--ff-numeric-feature-settings); font-size: 0.9375rem;line-height: 1.375rem;font-weight: 500; }
.ff-mono-s     { font-family: var(--ff-font-mono); font-feature-settings: var(--ff-numeric-feature-settings); font-size: 0.75rem;  line-height: 1.125rem;font-weight: 500; }

/* ---------------------------------------------------------------------------
 * Animations-Stiles — Klassen, die animations.js an Elemente anfasst.
 * Die JS-Direktive setzt nur die Klasse, die eigentliche Animation steht hier.
 * Reduced Motion: Dauer-Custom-Properties oben sind 0ms gesetzt, dann faellt
 * jede Animation auf einen Snap zurueck.
 * ------------------------------------------------------------------------- */

/* x-number-roll: Cross-Fade-Variante (kleine Diffs, < 10 EUR) */
@keyframes ff-numroll-fade {
  0%   { opacity: 0.2; transform: translateY(-30%); }
  50%  { opacity: 1;   transform: translateY(0);    }
  100% { opacity: 1;   transform: translateY(0);    }
}
.ff-numroll-fade {
  animation: ff-numroll-fade var(--ff-anim-duration-long) var(--ff-anim-easing) both;
  display: inline-block;
}

/* x-number-roll: Pulse-Variante (groesserer Sprung, >= 10 EUR) */
@keyframes ff-numroll-pulse {
  0%   { transform: scale(1);    color: var(--ff-text-primary); }
  40%  { transform: scale(1.08); color: var(--ff-accent); }
  100% { transform: scale(1);    color: var(--ff-text-primary); }
}
.ff-numroll-pulse {
  animation: ff-numroll-pulse var(--ff-anim-duration-long) var(--ff-anim-easing) both;
  display: inline-block;
}

/* x-tap-feedback: Scale-down + Glut-Wash beim pointerdown */
.ff-tap-active {
  transform: scale(0.97);
  background-color: var(--ff-accent-subtle) !important;
  transition: transform var(--ff-anim-duration-quick) var(--ff-anim-easing),
              background-color var(--ff-anim-duration-quick) var(--ff-anim-easing);
}

/* x-countdown-ring: SVG-Visualisierung */
.ff-countdown-ring {
  position: relative;
  width: 96px;
  height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ff-countdown-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Smooth-Update: stroke-dashoffset wird im JS pro Frame gesetzt, hier
   * fuegen wir eine kleine Glaettungs-Transition hinzu, falls der
   * RAF-Update aussetzt (z.B. Tab-Switch). */
  transition: stroke-dashoffset 60ms linear;
}
.ff-countdown-ring-bg {
  stroke: var(--ff-border);
}
.ff-countdown-ring-fg {
  stroke: var(--ff-accent);
  /* linear, weil die Zeit gleichmaessig verstreicht */
  transition: stroke-dashoffset 60ms linear;
}
.ff-countdown-ring [data-countdown-label] {
  position: relative;
  z-index: 1;
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: var(--ff-numeric-feature-settings);
}

/* Toast: Fade + Slide-Up — fuer das toast-Fragment */
@keyframes ff-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.ff-toast {
  animation: ff-toast-in var(--ff-anim-duration-medium) var(--ff-anim-easing) both;
}