/*
  life-as-submissive.com — Design-Token-System (Single Source of Truth).
  Nur Schwarz/Weiss/Graustufen. Keine Farbwerte ausserhalb dieser Palette.
  Referenz/visuelle Doku: ".claude/skills/design-system/Design System.dc.html". Regeln: SKILL.md.

  Verwendung: immer die SEMANTISCHEN Tokens (--las-bg, --las-surface, ...)
  im Komponenten-Code referenzieren, nie die Rohgraustufen oder rohe Hex-Werte.
*/

:root {
  /* --- Rohgraustufen (nicht direkt in Komponenten referenzieren) --- */
  --las-black:    #0a0a0a;
  --las-gray-900: #171717;
  --las-gray-800: #1f1f1f;
  --las-gray-700: #404040;
  --las-gray-600: #525252;
  --las-gray-500: #737373;
  --las-gray-400: #a3a3a3;
  --las-gray-300: #d4d4d4;
  --las-gray-200: #e5e5e5;
  --las-gray-100: #f5f5f5;
  --las-white:    #ffffff;

  /* --- Semantische Flaechen & Text --- */
  --las-bg:         var(--las-black);
  --las-surface:    var(--las-gray-900);
  --las-surface-2:  var(--las-gray-800);
  --las-text:       var(--las-gray-100);
  --las-text-muted: var(--las-gray-500);
  --las-border:     var(--las-gray-700);
  --las-accent:     var(--las-white);

  /* --- Zustaende (ohne Farbe: ueber Kontur/Fuellung geloest) --- */
  --las-state-active:   var(--las-white);   /* aktiv / erfolg / primaer */
  --las-state-error:    var(--las-gray-300); /* Fehler: heller Rahmen + Hinweistext */
  --las-state-disabled-bg:   var(--las-gray-900);
  --las-state-disabled-text: var(--las-gray-600);
  --las-focus-ring: var(--las-white);

  /* --- Typografie --- */
  --las-font-ui:   "Archivo", system-ui, -apple-system, sans-serif;
  --las-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --las-fw-regular:  400;
  --las-fw-medium:   500;
  --las-fw-semibold: 600;
  --las-fw-bold:     700;
  --las-fw-black:    800;

  --las-fs-label:   0.6875rem; /* 11px, mono/uppercase */
  --las-fs-xs:      0.75rem;   /* 12px */
  --las-fs-sm:      0.8125rem; /* 13px */
  --las-fs-base:    0.9375rem; /* 15px */
  --las-fs-lg:      1.0625rem; /* 17px */
  --las-fs-h3:      1.375rem;  /* 22px */
  --las-fs-h2:      2rem;      /* 32px */
  --las-fs-display: 4rem;      /* 64px */

  --las-ls-tight: -0.03em;
  --las-ls-label: 0.14em;

  /* --- Spacing (4px-Basisraster) --- */
  --las-space-1:  4px;
  --las-space-2:  8px;
  --las-space-3:  12px;
  --las-space-4:  16px;
  --las-space-6:  24px;
  --las-space-8:  32px;
  --las-space-12: 48px;
  --las-space-16: 64px;

  /* --- Radius --- */
  --las-radius-sm:   6px;
  --las-radius-md:   12px;
  --las-radius-pill: 999px;

  /* --- Motion --- */
  --las-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --las-duration-fast:   140ms;
  --las-duration-normal: 260ms;
}

/* Basis-Reset im Sinne des Systems */
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--las-bg);
  color: var(--las-text);
  font-family: var(--las-font-ui);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--las-white); color: var(--las-black); }

/* Zahlen, IDs, Tokens, Prozente, Labels immer in Mono */
.las-mono { font-family: var(--las-font-mono); }

/* Media-Tile Graustufe -> Farbe (Architekturplan Abschnitt 2): Farbvariante wird per Lazy
   Fetch von einem eigenen autorisierten Endpunkt nachgeladen und hier per Crossfade
   eingeblendet, nie per CSS-Filter auf dem bereits ausgelieferten Graustufenbild. */
.las-media-color-reveal {
  transition: opacity var(--las-duration-normal) var(--las-ease);
}

/* Globaler Link-Grundstil (Bootstrap-Klassenreste). .top-row/.sidebar sind gezielt in
   PWAClient/Layout/MainLayout.razor.css und NavMenu.razor.css auf die Graustufen-Palette
   gezogen (Blazor-CSS-Isolation, kein !important-Ueberschreiben mehr noetig). */
a {
  color: var(--las-white);
}

/* ==========================================================================
   Geteilte Komponenten-Klassen (SKILL.md Abschnitt 4 "Shared UI zuerst").
   Bewusst als globale CSS-Klassen statt eigener .razor-Wrapper-Komponenten:
   Blazors CSS-Isolation (::deep) macht echte Komponenten fuer reine
   Utility-Klassen unnoetig schwer -- diese Klassen wirken ueberall, jedes
   Modul-Frontend bindet nur theme.css ein, kein zusaetzlicher Projekt-Verweis.
   Vorher waren .las-button/.las-card/.las-field/.las-error in sechs Seiten
   unabhaengig (leicht abweichend) dupliziert -- u.a. mit rohem Rot (#e57373)
   fuer Fehler, das gegen die Monochrom-Regel verstiess.
   ========================================================================== */

.las-page-title {
  font-weight: var(--las-fw-regular);
  letter-spacing: var(--las-ls-label);
  text-transform: uppercase;
}

.las-page {
  max-width: 40rem;
  margin: var(--las-space-8) auto;
  padding: 0 var(--las-space-4);
}

.las-auth-card {
  max-width: 24rem;
  margin: var(--las-space-12) auto;
  padding: var(--las-space-8);
  border: 1px solid var(--las-border);
  background: var(--las-surface);
}
.las-auth-card h1 { margin-bottom: var(--las-space-6); }

.las-button {
  padding: 0.7rem 1.5rem;
  background: var(--las-accent);
  color: var(--las-black);
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: var(--las-ls-label);
  font-family: var(--las-font-ui);
}
.las-button:disabled { opacity: 0.5; cursor: default; }
.las-button:hover:not(:disabled) { background: var(--las-gray-200); }

.las-button-secondary {
  background: transparent;
  color: var(--las-white);
  border: 1px solid var(--las-border);
}
.las-button-secondary:hover:not(:disabled) { border-color: var(--las-white); }

.las-button-small {
  padding: 0.3rem 0.7rem;
  font-size: var(--las-fs-sm);
}

.las-card {
  border: 1px solid var(--las-border);
  background: var(--las-surface);
  padding: var(--las-space-6);
  margin: var(--las-space-4) 0;
}
.las-card h2 { font-size: var(--las-fs-base); font-weight: var(--las-fw-medium); margin: 0; }
.las-card h3 { font-size: var(--las-fs-sm); color: var(--las-text-muted); margin-top: var(--las-space-4); }

.las-field { margin-bottom: var(--las-space-3); display: flex; flex-direction: column; gap: 0.35rem; }
.las-field label { color: var(--las-text-muted); font-size: var(--las-fs-sm); }
.las-field input, .las-field select, .las-field textarea {
  background: var(--las-black);
  border: 1px solid var(--las-border);
  color: var(--las-text);
  padding: 0.6rem;
  font-family: var(--las-font-ui);
}
.las-field input:focus, .las-field select:focus, .las-field textarea:focus {
  outline: 1px solid var(--las-focus-ring);
  border-color: var(--las-focus-ring);
}

/* Fehler: heller Rahmen + Hinweistext statt Farbe (SKILL.md Abschnitt 3 "Muster fuer
   Zustaende ohne Farbe") -- ersetzt das vorher pro Seite duplizierte rohe #e57373. */
.las-error {
  border: 1px solid var(--las-state-error);
  color: var(--las-gray-200);
  padding: 0.6rem 0.8rem;
  font-size: var(--las-fs-sm);
  margin: var(--las-space-2) 0;
}

.las-hint { color: var(--las-text-muted); font-size: var(--las-fs-sm); }
.las-hint a { color: var(--las-white); }