/* Feinbuch — Design Tokens
   "Das Formblatt, das Sie selbst abstempeln" (siehe DESIGN.md).
   Formularpapier, Formgruen fuer Linien und Kaestchen, Stempelviolett fuer
   "geprueft" und die Hauptaktion, Stempelrot nur fuer Fehlendes, Textmarker-
   Gelb nur fuer den fertigen Monat. Die alten Variablennamen bleiben, damit
   alle Bildschirme die neuen Werte uebernehmen. */

/* Schrift: Archivo kommt aus fonts.css (selbst ausgeliefert, kein Google). */

:root {
  /* Tinte: gruenstichiges Schwarz bis Papier (ersetzt die alte Navy-Skala) */
  --ink-950: #0A140F;
  --ink-900: #12221A;
  --ink-800: #1B2E24;
  --ink-700: #24372D;
  --ink-600: #31463B;
  --ink-500: #3D5247;
  --ink-400: #5E7268;
  --ink-300: #89998F;
  --ink-200: #B9C4BD;
  --ink-150: #D3DED7;
  --ink-100: #E3EBE5;
  --ink-50:  #F2F5F1;
  --ink-25:  #FAFBF8;

  /* Stempelviolett (ersetzt das alte Gruen als Akzent) */
  --acc-50:  #F1ECF8;
  --acc-100: #E2D8F1;
  --acc-200: #C4B4E2;
  --acc-300: #9A80C9;
  --acc-400: #7656AE;
  --acc-500: #5A3A92;
  --acc-600: #472C78;
  --acc-700: #3A2463;
  --acc-800: #2B1A4A;

  /* Formblatt */
  --form: #1E5B45;
  --form-deep: #123D2E;
  --field: #EBF1EC;
  --rule: rgba(30, 91, 69, .2);
  --rule-strong: rgba(30, 91, 69, .5);
  --stamp: var(--acc-500);
  --stamp-deep: var(--acc-600);
  --stamp-red: #B0242B;
  --marker: #FFE45C;

  /* Semantik */
  --bg: #FFFFFF;
  --bg-elev: #FFFFFF;
  --bg-app: var(--ink-25);
  --bg-subtle: var(--ink-50);
  --bg-hover: #EEF3EE;
  --border: #D3DED7;
  --border-strong: #9DB3A7;
  --border-hairline: #E3EBE5;

  --text: var(--ink-900);
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-tertiary: var(--ink-400);
  --text-disabled: var(--ink-300);
  --text-on-accent: #FFFFFF;

  --accent: var(--acc-500);
  --accent-hover: var(--acc-600);
  --accent-soft: var(--acc-50);
  --accent-soft-text: var(--acc-600);

  --primary: var(--ink-900);
  --primary-hover: var(--ink-700);

  /* Status: Formgruen = in Ordnung, Ocker = bitte pruefen, Rot = fehlt/falsch,
     Violett = in Arbeit. Gelb ist dem Textmarker vorbehalten. */
  --success: var(--form);
  --success-bg: #EAF2EC;
  --success-border: #BFD5C7;

  --warning: #8A5A0B;
  --warning-text: #7A4F08;
  --warning-bg: #F7F0E1;
  --warning-border: #E3D2AE;

  --danger: var(--stamp-red);
  --danger-text: #8F1C22;
  --danger-bg: #FBE9EA;
  --danger-border: #EFC2C4;

  --info: var(--form);
  --info-bg: #EAF2EC;
  --info-border: #BFD5C7;

  --processing: var(--acc-500);
  --processing-bg: var(--acc-50);
  --processing-border: var(--acc-200);

  /* Diagramme: Formgruen, Violett, Ocker, Rot, dann Toenungen */
  --chart-1: #1E5B45;
  --chart-2: #5A3A92;
  --chart-3: #8A5A0B;
  --chart-4: #B0242B;
  --chart-5: #4E9A7C;
  --chart-6: #9A80C9;
  --chart-7: #3D5247;
  --chart-8: #C9A55A;

  /* Schrift: eine Familie, die Breitenachse macht Stempel */
  --font-sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Archivo', ui-sans-serif, system-ui, sans-serif;

  /* Formular-Ecken: fast eckig */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 4px;
  --r-2xl: 6px;
  --r-pill: 999px;

  /* Flach; Schatten nur fuer Papier, das auf dem Tisch liegt */
  --sh-xs: none;
  --sh-sm: 0 1px 0 rgba(18, 34, 26, .05);
  --sh-md: 0 1px 0 rgba(18, 34, 26, .04), 0 10px 24px -14px rgba(18, 34, 26, .28);
  --sh-lg: 0 1px 0 rgba(18, 34, 26, .04), 0 18px 40px -18px rgba(18, 34, 26, .28), 0 4px 10px -6px rgba(18, 34, 26, .18);
  --shadow-lg: var(--sh-lg);
  --sh-ring: 0 0 0 3px rgba(90, 58, 146, .28);
  --sh-key: 0 2px 0 var(--acc-600);

  /* Dichte */
  --row-h: 46px;
  --pad-card: 20px;
  --pad-section: 28px;
  --gap: 16px;
  --font-base: 15px;

  /* Layout */
  --sidebar-w: 248px;
  --sidebar-w-mini: 64px;
  --topbar-h: 62px;
  --bottomnav-h: 64px;
}

[data-density="compact"] {
  --row-h: 38px;
  --pad-card: 14px;
  --pad-section: 20px;
  --gap: 12px;
  --font-base: 14px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--font-base);
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg-app); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }