@import 'tailwindcss';

@theme {
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

:root {
  --kurus-brass: #c8963e;
  --kurus-brass-deep: #9a6f26;
  --kurus-ink: #1c1a16;
  --kurus-positive: #4f8a5b;
  --kurus-negative: #b23a48;
  --tg-safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  /* Telegram dışında (tarayıcı) açıklık için varsayılanlar */
  --tg-bg: #ffffff;
  --tg-text: #1c1a16;
  --tg-hint: #999999;
  --tg-secondary-bg: #f4f4f5;
  --tg-section-bg: #ffffff;
  --tg-separator: #e4e4e7;
  --tg-button: #c8963e;
  --tg-button-text: #ffffff;
  --tg-link: #c8963e;
}

html,
body {
  background: var(--tg-bg);
  color: var(--tg-text);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#root {
  min-height: 100dvh;
}

.app {
  min-height: 100dvh;
  padding-bottom: calc(16px + var(--tg-safe-area-inset-bottom));
  max-width: 640px;
  margin: 0 auto;
}

/* Marka vurgusu yalnızca 3 yerde: aktif ay sekmesi, tutar imleci, seçili kategori dilimi */
.text-brass {
  color: var(--kurus-brass);
}
.bg-brass {
  background: var(--kurus-brass);
}
.border-brass-deep {
  border-color: var(--kurus-brass-deep);
}

/* Amount bileşeni — lira büyük, kuruş küçük/paslı */
.amount {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.amount__lira {
  font-weight: 700;
}
.amount__kurus {
  font-weight: 600;
  opacity: 0.55;
}
.amount--lg .amount__lira {
  font-size: 40px;
}
.amount--lg .amount__kurus {
  font-size: 20px;
}
.amount--md .amount__lira {
  font-size: 22px;
}
.amount--md .amount__kurus {
  font-size: 13px;
}
.amount--sm .amount__lira {
  font-size: 15px;
}
.amount--sm .amount__kurus {
  font-size: 11px;
}

/* Kayıt giriş animasyonu — 180ms yükseklik açılışı */
@keyframes row-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.row-in {
  animation: row-in 180ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .row-in {
    animation: none;
  }
}

/* Kategori şeridi dilimleri */
.strip-seg {
  height: 100%;
  min-width: 4px;
  transition: transform 120ms ease;
}

/* Yapışkan gün başlığı */
.sticky-day {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--tg-bg);
  backdrop-filter: none;
}

/* Numeric input — imleç pirinç */
.amount-input {
  caret-color: var(--kurus-brass);
}
.amount-input::placeholder {
  color: var(--tg-hint);
}