/* Auftragscopilot Design System nach Brand Guide 1.0 (November 2026).
   Einzige Quelle für Farben, Schrift, Abstände und Radien. Website und Dashboard lesen ihre Werte von hier.
   Grundregel: viel Papier, Tinte für Text, Tomate nur für die eine Aktion, die als Nächstes zählt. */

/* Inter (Fließtext, Oberfläche, Labels) und Inter Tight (Überschriften, Kennzahlen, Logo).
   Beide variabel, Latin-Teilmenge von Google Fonts, selbst gehostet. Lizenz: public/fonts/OFL-LICENSE.txt */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Hauptfarben */
  --tomate: #d63e2a;         /* Akzent: Pfeil, Primärbutton, wichtigste Zahl */
  --tinte: #1a1413;          /* Text, Logo, dunkle Flächen */
  --papier: #f8f5f2;         /* Hintergrund */

  /* Ergänzende Farben */
  --grau: #635a57;           /* Nebentexte und Beschriftungen */
  --tomate-hell: #f8dfda;    /* Chips, Hinweise, Markierungen */
  --linie: #e6dfda;          /* Rahmen und Trennlinien */

  /* Abgeleitet für Zustände und dunkle Flächen */
  --tomate-hover: #bf3523;   /* Hover auf Primärbutton, Weiß darauf bleibt lesbar */
  --tomate-text: #a8301f;    /* Tomate als Fließtext auf Hell, erfüllt 4,5 : 1 */
  --grau-hell: #b5aca8;      /* Nebentext auf Tinte */
  --papier-tief: #f1ece7;    /* Hover und ruhige Flächen auf Papier */

  /* Rollen: Website und Dashboard nutzen diese Namen */
  --paper: var(--papier);
  --surface: #ffffff;
  --ink: var(--tinte);
  --muted: var(--grau);
  --line: var(--linie);
  --field-line: var(--grau);   /* Felder mit 1 px Grau */
  --frame-line: var(--linie);
  --frame-top: var(--papier);
  --band: var(--surface);
  --nav-glass: #fffffff0;
  --on-dark: var(--papier);
  --on-dark-muted: var(--grau-hell);
  --on-accent: #ffffff;

  /* Navigation im Tool */
  --frame-sidebar-ink: var(--grau);
  --frame-selected: var(--papier-tief);
  --frame-selected-ink: var(--tinte);
  --nav-active: var(--tomate-hell);

  /* Kleine Flächen */
  --sample-bg: var(--papier-tief);
  --sample-ink: var(--grau);
  --next-bg: var(--papier);

  /* Daten: Tinte und Grautöne, Tomate bleibt der wichtigsten Zahl vorbehalten */
  --chart-bar: var(--linie);
  --chart-bar-strong: var(--tinte);
  --data-1: var(--tinte);
  --data-2: var(--grau-hell);
  --data-3: var(--grau);
  --data-4: var(--linie);

  /* Intensität: sechs Stufen von Papier zu Tinte */
  --stufe-0: #f1ece7;
  --stufe-1: #e6dfda;
  --stufe-2: #c9bfba;
  --stufe-3: #9a8f8b;
  --stufe-4: #635a57;
  --stufe-5: #1a1413;

  /* Bewertung. Weil der Akzent rot ist, zeigt das Tool Bewertungen nie nur über Farbe,
     sondern immer mit Symbol und Text. Grün und Gelb sind für die Ampel ergänzt. */
  --besser-text: #1f6b4f;
  --besser-flaeche: #e4f0ea;
  --schlechter-text: var(--tomate-text);
  --schlechter-flaeche: var(--tomate-hell);
  --warnung-text: #7a5c00;
  --warnung-flaeche: #f8eed2;

  --focus: var(--tinte);

  /* Schrift */
  --font-text: "Inter", system-ui, sans-serif;
  --font-head: "Inter Tight", "Inter", system-ui, sans-serif;

  /* Radien: alle Ecken 4 px */
  --radius-xs: 4px;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-pill: 4px;
  --radius: 4px;

  /* Abstände: Raster aus 8 px */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;

  --shadow-frame: none;

  --curve: cubic-bezier(.22, 1, .36, 1);
  --dauer: .3s var(--curve);
}

html { background: var(--paper); }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Logo: Bildmarke aus c, o und Pfeil, daneben die Wortmarke.
   Die Lücke um den Pfeil nimmt die Farbe des Grunds an (--logo-grund). */
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; white-space: nowrap; --logo-grund: var(--paper); }
.logo_mark { display: block; width: 24px; height: 24px; flex-shrink: 0; overflow: visible; }
.logo_mark .logo_line { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
.logo_mark .logo_gap { fill: var(--logo-grund); stroke: var(--logo-grund); stroke-width: 5; stroke-linejoin: round; }
.logo_mark .logo_arrow { fill: var(--tomate); stroke: var(--tomate); stroke-width: 1.4; stroke-linejoin: round; }
.logo_word { font-family: var(--font-head); font-size: 18px; line-height: 1; font-weight: 400; letter-spacing: -.035em; }
.logo_word b { font-weight: 700; }
.logo.is-negative { color: var(--papier); --logo-grund: var(--tinte); }
.logo.on-surface { --logo-grund: var(--surface); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 2.4s !important; transition: none !important; }
}