/* ═══════════════════════════════════════════════════════════════════
   Fatura-KS 2026 — Design System
   Shared tokens, glass utilities, typography
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  /* Brand */
  --brand:          #2563eb;
  --brand-dark:     #1d4ed8;
  --brand-light:    #eff6ff;

  /* Semantic */
  --accent:         #f59e0b;
  --accent-soft:    #fffbeb;
  --success:        #059669;
  --danger:         #dc2626;

  /* Surfaces */
  --surface:        #ffffff;
  --surface-soft:   #f8fafc;
  --bg:             #f1f5f9;

  /* Text */
  --text:           #111827;
  --muted:          #6b7280;
  --subtle:         #9ca3af;

  /* Structure */
  --border:         #e5e7eb;
  --border-soft:    rgba(229, 231, 235, .7);

  /* Radius scale */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  22px;
  --radius: var(--r-sm);   /* legacy alias */

  /* Glass */
  --glass-bg:       rgba(255, 255, 255, .80);
  --glass-border:   rgba(255, 255, 255, .88);
  --glass-blur:     24px;
  --glass-sat:      1.6;

  /* Shadow scale */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.1),  0 4px 12px rgba(0,0,0,.06);

  /* Spacing */
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 36px;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

button,
[role="button"],
.gl-btn,
.gl-btn-primary,
.gl-btn-secondary,
.gl-btn-ghost,
.gl-btn-danger,
.gl-btn-icon,
input,
select,
textarea {
  touch-action: manipulation;
}

button svg,
[role="button"] svg,
.gl-btn svg,
.gl-btn-primary svg,
.gl-btn-secondary svg,
.gl-btn-ghost svg,
.gl-btn-danger svg,
.gl-btn-icon svg {
  pointer-events: none;
}

/* ── Premium background gradient ──────────────────────────────── */
.gl-bg {
  background:
    radial-gradient(ellipse at 10% 12%, rgba(96,177,255,.22) 0%, transparent 42%),
    radial-gradient(ellipse at 24% 18%, rgba(49,154,255,.12) 0%, transparent 34%),
    radial-gradient(ellipse at 88% 84%, rgba(96,177,255,.14) 0%, transparent 40%),
    linear-gradient(162deg, #fbfdff 0%, #f5f9ff 48%, #eef4fb 100%);
  background-attachment: fixed;
}

/* ── Glass utility classes ────────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
}

.glass-card {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(36px) saturate(1.55);
  -webkit-backdrop-filter: blur(36px) saturate(1.55);
  border: 1px solid rgba(255,255,255,.88);
  border-radius: var(--r-xl);
  box-shadow:
    0 2px 8px  rgba(0,0,0,.04),
    0 16px 48px rgba(0,0,0,.07),
    0 32px 80px rgba(49,154,255,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── Shared input ─────────────────────────────────────────────── */
.gl-input {
  width: 100%;
  height: 46px;
  border: 1.5px solid rgba(229,231,235,.9);
  border-radius: var(--r-sm);
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  background: rgba(255,255,255,.8);
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.gl-input:focus {
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
  background: rgba(255,255,255,.96);
}

.gl-input:focus-visible {
  outline: none;
}

.gl-input::placeholder { color: var(--muted); opacity: .5; }

/* ── Shared button system ─────────────────────────────────────── */
.gl-btn,
.gl-btn-primary,
.gl-btn-secondary,
.gl-btn-ghost,
.gl-btn-danger,
.gl-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    opacity .18s ease;
}

.gl-btn:hover:not(:disabled),
.gl-btn-primary:hover:not(:disabled),
.gl-btn-secondary:hover:not(:disabled),
.gl-btn-ghost:hover:not(:disabled),
.gl-btn-danger:hover:not(:disabled),
.gl-btn-icon:hover:not(:disabled) {
  transform: translateY(-1px);
}

.gl-btn:active:not(:disabled),
.gl-btn-primary:active:not(:disabled),
.gl-btn-secondary:active:not(:disabled),
.gl-btn-ghost:active:not(:disabled),
.gl-btn-danger:active:not(:disabled),
.gl-btn-icon:active:not(:disabled) {
  transform: translateY(0);
}

.gl-btn:focus-visible,
.gl-btn-primary:focus-visible,
.gl-btn-secondary:focus-visible,
.gl-btn-ghost:focus-visible,
.gl-btn-danger:focus-visible,
.gl-btn-icon:focus-visible {
  outline: 3px solid rgba(37,99,235,.22);
  outline-offset: 2px;
}

.gl-btn:disabled,
.gl-btn-primary:disabled,
.gl-btn-secondary:disabled,
.gl-btn-ghost:disabled,
.gl-btn-danger:disabled,
.gl-btn-icon:disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

.gl-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #4f8ef8 0%, #2563eb 100%);
  border-color: rgba(37,99,235,.36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 10px 24px rgba(37,99,235,.20);
}

.gl-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 14px 28px rgba(37,99,235,.28);
}

.gl-btn-secondary {
  color: var(--text);
  background: rgba(255,255,255,.78);
  border-color: rgba(15,23,42,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 8px 20px rgba(15,23,42,.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.gl-btn-secondary:hover:not(:disabled) {
  background: rgba(255,255,255,.95);
  border-color: rgba(148,163,184,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 12px 24px rgba(15,23,42,.08);
}

.gl-btn-ghost {
  color: var(--muted);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.gl-btn-ghost:hover:not(:disabled) {
  color: var(--text);
  background: rgba(255,255,255,.72);
  border-color: rgba(15,23,42,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 8px 18px rgba(15,23,42,.04);
}

.gl-btn-danger {
  color: #fff;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-color: rgba(220,38,38,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 10px 24px rgba(220,38,38,.14);
}

.gl-btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 14px 30px rgba(220,38,38,.18);
}

.gl-btn-icon {
  width: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 10px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .glass-card,
  .gl-btn-secondary,
  .gl-btn-ghost {
    background: rgba(255,255,255,.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .gl-btn-secondary,
  .gl-btn-ghost {
    box-shadow: 0 8px 18px rgba(15,23,42,.05);
  }
}

@media (max-width: 480px) {
  .gl-btn,
  .gl-btn-primary,
  .gl-btn-secondary,
  .gl-btn-ghost,
  .gl-btn-danger {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    gap: 6px;
    font-size: 13px;
  }

  .gl-btn-icon {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 10px;
  }
}

/* ── Spinner ──────────────────────────────────────────────────── */
.gl-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: gl-spin .7s linear infinite;
}

@keyframes gl-spin { to { transform: rotate(360deg); } }