/* ==========================================================================
   RepForge – Design Tokens
   Einzige Quelle für Farben, Abstände, Schriftgrößen, Radien, Schatten.
   Komponenten verwenden ausschließlich diese Variablen (keine Rohwerte).
   Dokumentation: docs/design-system.md
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Farben: Anthrazit-Flächen (von tief nach hell) ------------------- */
  --color-bg: #0b0d0e;
  --color-surface-1: #121517;
  --color-surface-2: #181c1f;
  --color-surface-3: #20252a;
  --color-border: #2a3035;
  --color-border-strong: #3d464e;

  /* ---- Farben: Text ----------------------------------------------------- */
  --color-text: #eef2ef;
  --color-text-muted: #a7b0ad;
  --color-text-faint: #8a9491;

  /* ---- Farben: Akzent (Lime) ------------------------------------------- */
  --color-accent: #c8f53c;
  --color-accent-strong: #b6e022;
  --color-accent-ink: #10150a; /* Text auf Akzentflächen */
  --color-accent-soft: rgb(200 245 60 / 0.12);

  /* ---- Farben: Status --------------------------------------------------- */
  --color-danger: #ff7b6e;
  --color-warning: #ffc247;
  --color-success: #4ade80;
  --color-info: #6ab7ff;

  /* ---- Typografie ------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem; /* mind. 16px: verhindert Auto-Zoom in iOS Safari bei Eingabefeldern */
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --weight-regular: 400;
  --weight-medium: 560;
  --weight-bold: 700;
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* ---- Abstände (4px-Raster) ------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* ---- Radien ----------------------------------------------------------- */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* ---- Schatten --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 6px 18px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.55);

  /* ---- Bewegung --------------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Bedienung / Layout ---------------------------------------------- */
  --tap-size: 2.75rem; /* 44px Mindestgröße für Touch-Ziele */
  --nav-height: 4rem;
  --content-max: 46rem;

  /* ---- Safe Areas (Notch, Dynamic Island, Home-Indikator) --------------- */
  /* Der Simulator darf diese Werte zur Entwicklung überschreiben
     (scripts/modules/sim-bridge.js). Im Normalbetrieb gelten die echten
     env()-Werte des Geräts. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* ---- Ebenen ----------------------------------------------------------- */
  --z-nav: 20;
  --z-toast: 40;
}