/* ============================================================================
 * LATIKAN UI Design Tokens (v1 · 2026-04-21)
 * Basis: "Blatt" (monochrom, s/w + 1 Akzent) + Akzent-Geste aus "Neon"
 *
 * Diese Datei ist die SINGLE SOURCE OF TRUTH für alle Tools:
 * Tresor, Faktura, TICK, Obelisk-Preview, Pylon, Kompass, Atrium, Studio.
 * Kopiere sie 1:1 in dein Tool, lade sie als erstes CSS. Keine Forks.
 *
 * Werte angepasst? Bitte Pull-Request via Rudi-Freigabe.
 * ============================================================================ */

:root {
  /* -------------------- Primary (der eine Akzent) -------------------- */
  --latikan-primary:        #7C3AED;  /* LATIKAN Violett */
  --latikan-primary-hover:  #6D28D9;
  --latikan-primary-glow:   rgba(124, 58, 237, 0.18);
  --latikan-primary-bg:     rgba(124, 58, 237, 0.08);
  --latikan-gradient:       linear-gradient(135deg, #7C3AED, #A78BFA);

  /* -------------------- Neutrals (Light Mode Default) -------------------- */
  --latikan-bg:             #FFFFFF;
  --latikan-surface:        #FAFAFA;
  --latikan-surface-2:      #F3F4F6;
  --latikan-text:           #0A0A0A;
  --latikan-text-muted:     #6B7280;
  --latikan-border:         #E5E7EB;
  --latikan-border-strong:  #0A0A0A;

  /* -------------------- Status Colors -------------------- */
  --latikan-success:        #059669;
  --latikan-success-bg:     rgba(5, 150, 105, 0.08);
  --latikan-warn:           #C2750F;
  --latikan-warn-bg:        rgba(245, 158, 11, 0.12);
  --latikan-danger:         #DC2626;
  --latikan-danger-bg:      rgba(220, 38, 38, 0.08);

  /* -------------------- Typography -------------------- */
  --latikan-font-sans:      'Inter', 'Helvetica Neue', system-ui, -apple-system, Arial, sans-serif;
  --latikan-font-mono:      'SF Mono', 'Consolas', 'Monaco', monospace;

  --latikan-text-xs:        0.75rem;   /* 12 */
  --latikan-text-sm:        0.85rem;   /* 13.6 */
  --latikan-text-base:      0.95rem;   /* 15.2 */
  --latikan-text-lg:        1.1rem;    /* 17.6 */
  --latikan-text-xl:        1.4rem;    /* 22.4 */
  --latikan-text-2xl:       1.9rem;    /* 30.4 */

  --latikan-weight-normal:  400;
  --latikan-weight-medium:  500;
  --latikan-weight-semi:    600;
  --latikan-weight-bold:    700;
  --latikan-weight-black:   800;

  /* Fundamentale Regel: s/w mit 1 Akzent. Keine weiteren Farben. */

  /* -------------------- Spacing -------------------- */
  --latikan-space-1:  0.25rem;
  --latikan-space-2:  0.5rem;
  --latikan-space-3:  0.75rem;
  --latikan-space-4:  1rem;
  --latikan-space-5:  1.25rem;
  --latikan-space-6:  1.5rem;
  --latikan-space-8:  2rem;
  --latikan-space-10: 2.5rem;
  --latikan-space-12: 3rem;

  /* -------------------- Radius -------------------- */
  --latikan-radius-sm: 4px;
  --latikan-radius:    8px;
  --latikan-radius-lg: 14px;
  --latikan-radius-xl: 18px;

  /* -------------------- Shadows (sparsam, "Blatt" mag weniger) -------------------- */
  --latikan-shadow-sm:  0 1px 2px rgba(0,0,0,0.04);
  --latikan-shadow:     0 1px 3px rgba(0,0,0,0.04), 0 6px 12px rgba(0,0,0,0.03);
  --latikan-shadow-lg:  0 12px 28px rgba(0,0,0,0.08);

  /* -------------------- Transitions -------------------- */
  --latikan-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode: Invertiere Basis, Akzent bleibt */
[data-theme="dark"], [data-mode="dark"] {
  --latikan-bg:             #0A0A0A;
  --latikan-surface:        #141414;
  --latikan-surface-2:      #1F1F1F;
  --latikan-text:           #F5F5F5;
  --latikan-text-muted:     #9CA3AF;
  --latikan-border:         #2A2A2A;
  --latikan-border-strong:  #F5F5F5;
}

/* -------------------- Base Reset (sehr leicht, nicht invasiv) -------------------- */
*, *::before, *::after { box-sizing: border-box; }
body.latikan, .latikan-scope {
  font-family: var(--latikan-font-sans);
  font-size: var(--latikan-text-base);
  color: var(--latikan-text);
  background: var(--latikan-bg);
  line-height: 1.5;
}

/* -------------------- Buttons -------------------- */
.latikan-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--latikan-space-2);
  padding: var(--latikan-space-2) var(--latikan-space-4);
  border-radius: var(--latikan-radius);
  font-size: var(--latikan-text-sm);
  font-weight: var(--latikan-weight-semi);
  font-family: inherit;
  border: 1px solid var(--latikan-border);
  background: var(--latikan-surface);
  color: var(--latikan-text);
  cursor: pointer;
  transition: background var(--latikan-transition), transform var(--latikan-transition);
}
.latikan-btn:hover { background: var(--latikan-surface-2); }
.latikan-btn:active { transform: translateY(1px); }
.latikan-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.latikan-btn-primary {
  background: var(--latikan-primary);
  color: #fff;
  border-color: var(--latikan-primary);
  background-image: var(--latikan-gradient);    /* die eine Farb-Geste aus "Neon" */
  box-shadow: 0 0 0 0 var(--latikan-primary-glow);
  transition: box-shadow var(--latikan-transition), transform var(--latikan-transition);
}
.latikan-btn-primary:hover {
  background-color: var(--latikan-primary-hover);
  box-shadow: 0 0 0 6px var(--latikan-primary-glow);
}
.latikan-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--latikan-primary);
}
.latikan-btn-danger {
  background: transparent;
  border-color: var(--latikan-danger);
  color: var(--latikan-danger);
}

/* -------------------- Cards / Panels -------------------- */
.latikan-card {
  background: var(--latikan-surface);
  border: 1px solid var(--latikan-border);
  border-radius: var(--latikan-radius-lg);
  padding: var(--latikan-space-5);
}
.latikan-panel {
  padding: var(--latikan-space-4) 0;
  border-top: 1px solid var(--latikan-border);
}
.latikan-panel:first-child { border-top: none; }
.latikan-panel-title {
  font-size: var(--latikan-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--latikan-weight-semi);
  color: var(--latikan-text-muted);
  padding-bottom: var(--latikan-space-2);
  border-bottom: 1px solid var(--latikan-border-strong);
  margin-bottom: var(--latikan-space-3);
}

/* -------------------- KPIs (Blatt-Style: Border-Links statt Box) -------------------- */
.latikan-kpi {
  background: transparent;
  border-left: 3px solid var(--latikan-border-strong);
  padding-left: var(--latikan-space-3);
}
.latikan-kpi.accent { border-left-color: var(--latikan-primary); }
.latikan-kpi-label {
  font-size: var(--latikan-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--latikan-weight-semi);
  color: var(--latikan-text-muted);
}
.latikan-kpi-value {
  font-size: var(--latikan-text-2xl);
  font-weight: var(--latikan-weight-black);
  font-variant-numeric: tabular-nums;
  color: var(--latikan-text);
  line-height: 1.1;
}

/* -------------------- Form Elements -------------------- */
.latikan-input, .latikan-select, .latikan-textarea {
  width: 100%;
  padding: var(--latikan-space-2) var(--latikan-space-3);
  border: 1px solid var(--latikan-border);
  border-radius: var(--latikan-radius);
  background: var(--latikan-bg);
  color: var(--latikan-text);
  font-size: var(--latikan-text-base);
  font-family: inherit;
  transition: border-color var(--latikan-transition), box-shadow var(--latikan-transition);
}
.latikan-input:focus, .latikan-select:focus, .latikan-textarea:focus {
  outline: none;
  border-color: var(--latikan-primary);
  box-shadow: 0 0 0 3px var(--latikan-primary-glow);
}
.latikan-label {
  display: block;
  font-size: var(--latikan-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--latikan-weight-semi);
  color: var(--latikan-text-muted);
  margin-bottom: var(--latikan-space-1);
}

/* -------------------- Table (Blatt-Style: minimale Linien) -------------------- */
.latikan-table { width: 100%; border-collapse: collapse; font-size: var(--latikan-text-sm); }
.latikan-table thead th {
  text-align: left;
  padding: var(--latikan-space-2) var(--latikan-space-3);
  font-size: var(--latikan-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--latikan-weight-semi);
  color: var(--latikan-text-muted);
  border-bottom: 1px solid var(--latikan-border-strong);
}
.latikan-table tbody td {
  padding: var(--latikan-space-3);
  border-bottom: 1px solid var(--latikan-border);
}
.latikan-table tbody tr:hover { background: var(--latikan-surface-2); cursor: pointer; }
.latikan-table td:last-child, .latikan-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* -------------------- Status Chips (Blatt: Punkt + Text, kein Hintergrund) -------------------- */
.latikan-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--latikan-text-xs);
  font-weight: var(--latikan-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.latikan-chip::before {
  content: '●';
  font-size: 0.8em;
}
.latikan-chip.paid::before     { color: var(--latikan-success); }
.latikan-chip.open::before     { color: var(--latikan-primary); }
.latikan-chip.overdue::before  { color: var(--latikan-danger); }
.latikan-chip.cancelled::before{ color: var(--latikan-text-muted); }
.latikan-chip.draft::before    { color: var(--latikan-warn); }

/* -------------------- Navigation -------------------- */
.latikan-nav {
  display: flex; gap: var(--latikan-space-5);
  border-bottom: 2px solid var(--latikan-border-strong);
  padding: var(--latikan-space-3) var(--latikan-space-6);
}
.latikan-nav a, .latikan-nav button {
  color: var(--latikan-text);
  opacity: 0.55;
  text-decoration: none;
  font-weight: var(--latikan-weight-medium);
  padding: var(--latikan-space-1) 0;
  border: none; background: transparent; cursor: pointer; font-size: var(--latikan-text-sm);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px; /* bündig mit der Haupt-Border */
}
.latikan-nav a.active, .latikan-nav button.active {
  opacity: 1;
  border-bottom-color: var(--latikan-primary);
}

/* -------------------- Toast / Notification -------------------- */
.latikan-toast {
  background: var(--latikan-surface);
  border: 1px solid var(--latikan-border);
  border-left: 3px solid var(--latikan-primary);
  border-radius: var(--latikan-radius);
  padding: var(--latikan-space-3) var(--latikan-space-4);
}
.latikan-toast.success { border-left-color: var(--latikan-success); }
.latikan-toast.error   { border-left-color: var(--latikan-danger); }
.latikan-toast.warn    { border-left-color: var(--latikan-warn); }

/* -------------------- Utility -------------------- */
.latikan-mono { font-family: var(--latikan-font-mono); font-variant-numeric: tabular-nums; }
.latikan-muted { color: var(--latikan-text-muted); }
.latikan-sep { height: 1px; background: var(--latikan-border); margin: var(--latikan-space-4) 0; }