/* Jarvis Designsystem – Tokens (Goal D1, ADR 0008).
   Einzige Quelle für Farbe, Raum, Typografie, Tiefe und Bewegung. Fachansichten nutzen nur diese Variablen.
   Richtung: warm, ruhig, fast monochrom. Eine Akzentfarbe (Ton), Statusfarben nur als kleine Signale. Hell ist Standard. */
@layer tokens, basis, motion, ansichten;

@layer tokens {
  :root {
    color-scheme: light;

    /* Warme Neutraltöne, hell */
    --farbe-grund: oklch(0.985 0.006 85);
    --farbe-flaeche-1: oklch(0.995 0.004 85);
    --farbe-flaeche-2: oklch(0.955 0.008 85);
    --farbe-flaeche-3: oklch(0.925 0.01 85);
    --farbe-rand: oklch(0.9 0.008 85);
    --farbe-rand-stark: oklch(0.8 0.012 80);
    --farbe-text: oklch(0.27 0.015 60);
    --farbe-text-leise: oklch(0.52 0.015 60);

    /* Die eine Akzentfarbe: gebrannter Ton. Dunkel genug für Text, weich für Flächen. */
    --farbe-aktion: oklch(0.53 0.13 40);
    --farbe-aktion-text: oklch(1 0 0);
    --farbe-jarvis: oklch(0.53 0.13 40);
    --farbe-jarvis-text: oklch(1 0 0);
    --farbe-akzent-weich: oklch(0.7 0.13 40);

    /* Statusfarben, gedämpft, nur für Punkte, Ränder und kurze Texte */
    --farbe-gut: oklch(0.5 0.1 150);
    --farbe-warn: oklch(0.55 0.12 70);
    --farbe-schlecht: oklch(0.5 0.16 28);
    --farbe-fokus: var(--farbe-aktion);
    --farbe-schleier: oklch(0.3 0.01 60 / 0.35);

    /* Raum (4-px-Raster) und Radien */
    --raum-1: 4px; --raum-2: 8px; --raum-3: 12px; --raum-4: 16px; --raum-5: 24px; --raum-6: 32px; --raum-7: 48px;
    --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-xl: 24px; --radius-rund: 999px;
    --nav-breite: 248px;

    /* Typografie: Serife für Überschriften und Marke, Systemschrift für Text, Mono mit tabularen Ziffern für Zahlen */
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --schrift-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --schrift-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    --groesse-xs: 12px; --groesse-s: 13.5px; --groesse-m: 15px; --groesse-l: 19px; --groesse-xl: 26px;

    /* Tiefe: sehr zurückhaltend, fertige Ebenen, werden nie animiert */
    --schatten-1: 0 1px 2px oklch(0.3 0.02 60 / 0.06);
    --schatten-2: 0 6px 24px oklch(0.3 0.02 60 / 0.1);
    --schatten-3: 0 20px 50px oklch(0.3 0.02 60 / 0.16);
    --ebene-kopf: 10; --ebene-blatt: 40; --ebene-toast: 50;

    /* Bewegung: Dauern und Federn (linear()-Kurven, überall seit Safari 17.2) */
    --dauer-xs: 120ms; --dauer-s: 200ms; --dauer-m: 320ms; --dauer-l: 480ms;
    --kurve-aus: cubic-bezier(0.2, 0, 0, 1);
    --feder-weich: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077 20.4%, 1.121, 1.149 24.3%,
      1.159, 1.163 27.8%, 1.154, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
      0.997 69.8%, 1.003 76.9%, 1);
    --feder-knackig: linear(0, 0.013, 0.05 2.5%, 0.19 5.3%, 0.74 13.4%, 0.931 17.4%, 1.012, 1.062 22.4%, 1.084 25.4%,
      1.083 29.4%, 1.034 38.3%, 0.993 48.1%, 0.985 55.8%, 1.001 76.3%, 1);
  }

  :root[data-thema="dunkel"] {
    color-scheme: dark;
    --farbe-grund: oklch(0.21 0.01 60);
    --farbe-flaeche-1: oklch(0.24 0.01 60);
    --farbe-flaeche-2: oklch(0.28 0.012 60);
    --farbe-flaeche-3: oklch(0.33 0.012 60);
    --farbe-rand: oklch(0.34 0.01 60);
    --farbe-rand-stark: oklch(0.44 0.012 60);
    --farbe-text: oklch(0.93 0.01 80);
    --farbe-text-leise: oklch(0.7 0.012 70);
    --farbe-aktion: oklch(0.75 0.11 45);
    --farbe-aktion-text: oklch(0.21 0.01 60);
    --farbe-jarvis: oklch(0.75 0.11 45);
    --farbe-jarvis-text: oklch(0.21 0.01 60);
    --farbe-akzent-weich: oklch(0.7 0.12 42);
    --farbe-gut: oklch(0.75 0.1 150);
    --farbe-warn: oklch(0.78 0.11 75);
    --farbe-schlecht: oklch(0.72 0.14 28);
    --farbe-schleier: oklch(0.1 0.01 60 / 0.55);
    --schatten-1: 0 1px 2px oklch(0 0 0 / 0.3);
    --schatten-2: 0 6px 24px oklch(0 0 0 / 0.35);
    --schatten-3: 0 20px 50px oklch(0 0 0 / 0.5);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --feder-weich: var(--kurve-aus);
      --feder-knackig: var(--kurve-aus);
      --dauer-m: 160ms;
      --dauer-l: 160ms;
    }
  }
}