/*
 * FoodNotify Design-Token — Farbwelt „System intern 2027".
 *
 * Werte pixelgenau aus dem Entwurf `System intern 2027 – Inventur` gemessen.
 * Die Semantik folgt der Legende aus diesem Entwurf:
 *
 *   Rot       = Fehlmenge
 *   Bernstein = ungezählt / prüfen
 *   Waldgrün  = im Soll
 *   Lime      = Markensignal: Aktion, Navigation, KI
 *   Orange    = ausschließlich Menschen: Zuweisung, Kommentar, Kontakt
 *
 * Diese Regel ist verbindlich. Wer Orange für einen Systemzustand benutzt,
 * nimmt der Farbe ihre Bedeutung.
 *
 * Zwei Werte weichen bewusst vom Entwurf ab, begründet in docs/ACCESSIBILITY.md:
 *   --fn-success  #27692b statt #2e7d32 (4,45 : 1 lag knapp unter der Grenze)
 *   --fn-warn     #8a6508 für Text; #b8860b nur ab 24 px (--fn-warn-display)
 */

/* Eine registrierte Eigenschaft laesst sich animieren. Ohne das springt
   der Inhalt der Seite, waehrend die Leiste noch faehrt. */
@property --fn-nav-width {
  syntax: '<length>';
  inherits: true;
  initial-value: 268px;
}

:root {
  transition: --fn-nav-width var(--fn-dur-base, 220ms) var(--fn-ease-out, ease);

  /* ---- Marke ---- */
  --fn-lime: #a5ea07;
  --fn-lime-bright: #ccff00;
  --fn-lime-pale: #e5ffa6;
  --fn-forest: #1c3308;
  --fn-forest-raised: #24400c;
  /* Nur für Menschen: Zuweisung, Kommentar, Kontakt. Sonst nie. */
  --fn-human: #ec7d06;
  --fn-human-soft: #fff0df;

  /* ---- Seite ---- */
  --fn-surface: #ffffff;
  --fn-surface-sunken: #f2f4ec;
  --fn-surface-muted: #f7f8f3;
  --fn-ink: #1c3308;
  --fn-ink-muted: #5c6b4a;
  --fn-ink-faint: #8a9678;
  --fn-line: #e3e7d9;
  --fn-line-soft: #eef1e7;

  /* Fokus und Link-Gruen haben eigene Token, weil die Markenfarben im
     Dunkeln nicht kippen: #1c3308 als Fokusring auf #16220c waren 1,20 : 1,
     und --fn-green-ink war bis hierher nirgends definiert -- alle drei
     Verwendungen liefen auf ihrem Fallback. */
  --fn-focus: #1c3308;       /* 13,76 : 1 auf Weiss */
  --fn-green-ink: #4d7a26;   /*  5,09 : 1 auf Weiss */
  --fn-on-critical: #ffffff; /*  5,44 : 1 auf --fn-critical */

  /* ---- Semantik ---- */
  --fn-critical: #c0392b;
  --fn-critical-soft: #fbe9e7;
  --fn-warn: #8a6508;
  --fn-warn-display: #b8860b;
  --fn-warn-soft: #fff4d6;
  --fn-success: #27692b;
  --fn-success-soft: #e6f2e6;
  --fn-info-soft: #eef1e7;
  --fn-info-ink: #5c6b4a;

  /* ---- Navigation ----
     Die Leiste ist waldgrün — in beiden Modi. Sie ist der ruhende Pol,
     um den herum die Seite hell oder dunkel wird. */
  --fn-nav-bg: #1c3308;
  --fn-nav-bg-raised: #24400c;
  --fn-nav-ink: #f2f4ec;
  --fn-nav-ink-muted: #c9d9b0;
  --fn-nav-ink-faint: #93a87a;
  /* Warmes statt neutrales Weiss in den Trennlinien. Kuehles Grau liest
     sich gedruckt, warmes liest sich beleuchtet. */
  --fn-nav-line: rgba(255, 219, 178, 0.18);
  --fn-nav-hover: rgba(255, 219, 178, 0.10);
  /* Gedeckt statt grell: dieselbe dunkle Schrift wie auf der Aktiv-Pille
     (9,91 : 1), aber ohne deren Farbkraft. Der Unterschied zwischen
     Zeigen und Aktiv liegt in der Saettigung, nicht in der Helligkeit. */
  --fn-nav-hover-bg: #d3e0b8;
  --fn-nav-hover-ink: var(--fn-forest);
  --fn-nav-active-bg: var(--fn-lime);
  --fn-nav-active-ink: var(--fn-forest);
  --fn-nav-warn: #e8b53a;
  --fn-nav-critical: #e8705f;
  /* Orange auf dunklem Grund: #ec7d06 waere dort zu dunkel. */
  --fn-nav-human: #ffb366;

  /* ---- Form ---- */
  --fn-radius-sm: 6px;
  --fn-radius: 10px;
  --fn-radius-lg: 14px;
  /* Schatten tragen einen Rest Orange statt neutralem Schwarz. Warme
     Schatten wirken teuer, kuehle wirken gedruckt. Der Farbstich ist zu
     schwach, um ihn zu benennen -- er faellt nur im Vergleich auf. */
  --fn-shadow-drawer: 0 0 48px rgba(26, 14, 3, 0.36);
  --fn-shadow-pop: 0 6px 24px rgba(58, 34, 8, 0.17);
  /* Die Aussenkante der Leiste. */
  --fn-shadow-nav-edge: 10px 0 26px -18px rgba(74, 38, 4, 0.55);

  /* ---- Schrift ---- */
  --fn-font: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
  --fn-font-display: 'Poppins', var(--fn-font);

  /* ---- Masse ---- */
  --fn-nav-width-expanded: 268px;
  --fn-nav-width-collapsed: 76px;
  --fn-nav-width: var(--fn-nav-width-expanded);
  --fn-hit: 38px;
  --fn-hit-icon: 44px;

  /* ---- Bewegung, siehe docs/MOTION.md ---- */
  --fn-dur-instant: 90ms;
  --fn-dur-quick: 160ms;
  --fn-dur-base: 220ms;
  --fn-dur-slow: 320ms;
  --fn-dur-tip: 380ms;
  --fn-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --fn-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --fn-ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
}

/* Finger statt Maus: alles wächst, nichts springt. */
@media (pointer: coarse) {
  :root {
    --fn-hit: 50px;
    --fn-hit-icon: 52px;
    --fn-nav-width-collapsed: 84px;
  }
}

/* Dunkelmodus: die Seite kippt, die Leiste bleibt. */
:root[data-fn-theme='dark'],
:root.dark {
  --fn-surface: #16220c;
  --fn-surface-sunken: #101a08;
  --fn-surface-muted: #1c2a11;
  --fn-ink: #eef2e6;
  --fn-ink-muted: #b4c39e;
  --fn-ink-faint: #85976c;
  --fn-line: rgba(238, 242, 230, 0.12);
  --fn-line-soft: rgba(238, 242, 230, 0.07);

  --fn-critical: #f0a79d;
  --fn-critical-soft: #3a1a15;
  --fn-warn: #e8c46a;
  --fn-warn-display: #e8c46a;
  --fn-warn-soft: #362a0d;
  --fn-success: #8bc98e;
  --fn-success-soft: #18300f;
  --fn-info-soft: #22301a;
  --fn-info-ink: #b4c39e;

  --fn-human-soft: #3a2409;

  --fn-focus: #a5ea07;       /* 11,33 : 1 auf #16220c */
  --fn-green-ink: #9ccf5f;   /*  9,07 : 1 auf #16220c */
  /* --fn-critical wird im Dunkeln hellrosa; weisse Schrift darauf waren
     1,96 : 1. */
  --fn-on-critical: #2a0f0b; /*  9,15 : 1 auf #f0a79d */

  /* Im Dunkeln ist die Leiste heller als die Seite, nicht dunkler —
     sonst verschwindet sie darin (gemessen: 1,03 : 1). Die Leiste behaelt
     ihre Rolle als ruhender Pol, nicht ihren Hexwert. */
  --fn-nav-bg: #24400c;
  --fn-nav-bg-raised: #2e5110;
}

/* Wer keine Bewegung will, bekommt keine. Ohne Ausnahme. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fn-dur-instant: 1ms;
    --fn-dur-quick: 1ms;
    --fn-dur-base: 1ms;
    --fn-dur-slow: 1ms;
    --fn-dur-tip: 1ms;
  }
}