/* Fraindly Design Tokens — einzige Quelle der Wahrheit.
   Nie Hex-Werte, px-Abstände oder Tailwind-Standardfarben ausserhalb dieser Datei verwenden. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Flächen */
  --bg: #F6F4ED;
  --bg-sunk: #EFEBE0;       /* Hover, aktive Zeile, Eingabe-Fokusfläche */
  --bg-raised: #FBFAF6;     /* nur Overlays (Dropdown, Drawer, Toast) */

  /* Text */
  --text: #1A1816;
  --text-muted: #66625B;    /* 5.5:1 auf --bg */

  /* Linien */
  --line: rgba(26, 24, 22, 0.14);
  --line-strong: rgba(26, 24, 22, 0.55);

  /* Akzent: Swiss Crimson. Nur Primäraktion, Fokus, aktiver Zustand, ein Akzent pro Ansicht. */
  --accent: #D52B1E;
  --accent-hover: #B8221A;
  --accent-press: #9A1C15;
  --accent-text: #B8221A;   /* Crimson als Textfarbe auf --bg (5.8:1) */
  --on-accent: #FFFFFF;

  /* Semantik */
  --success: #255930;       /* Grün: Erfolg, aktiv, gesund. Text 7.5:1 auf --bg */
  --warning: #8A5A00;
  --error: #A31F15;
  --info: #1A1816;

  /* Typografie */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display: clamp(2.75rem, 5vw, 4.25rem);
  --fs-h1: clamp(2.25rem, 3.5vw, 3rem);
  --fs-h2: 1.75rem;
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* Abstand */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 48px;
  --s-6: 96px;

  /* Form */
  --radius: 2px;
  --control-h: 40px;
  --focus-ring: 2px solid var(--accent);
  --shadow-overlay: 0 8px 24px rgba(26, 24, 22, 0.12);

  /* Bewegung */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 180ms;

  /* Layout */
  --page-max: 1280px;
  --page-pad: clamp(16px, 4vw, 48px);

  /* App-Layout (Standard für Anwendungen) */
  --app-nav-w: 240px;
  --app-nav-w-collapsed: 56px;   /* 40px Icon-Button + 8px Rand */
  --app-col-min: 280px;
  --app-handle-hit: 40px;        /* Ziehbereich um den Spaltentrenner */
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141210;
  --bg-sunk: #1E1B18;
  --bg-raised: #1A1816;
  --text: #ECE8E1;
  --text-muted: #A29C92;
  --line: rgba(236, 232, 225, 0.14);
  --line-strong: rgba(236, 232, 225, 0.55);
  --accent: #C9291C;        /* Flächen (Button) mit weissem Text, 5.5:1 */
  --accent-hover: #DA3426;
  --accent-press: #E6392B;
  --accent-text: #F0584A;   /* Crimson als Text auf dunklem Grund */
  --success: #4E9A5E;       /* Heller Grünton für Text auf dunklem Grund, 5.4:1 */
  --warning: #D9A441;
  --error: #FF8577;
  --info: #ECE8E1;
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}