/**
 * Global UI tokens — derin premium teal + nötr slate.
 * main.css sonrası yüklenir; birincil vurgu tek ailede tutulur.
 */
:root {
  --token-color-primary: #0d6b68;
  --token-color-primary-hover: #0a5553;
  --token-color-primary-muted: #3d8a87;
  --token-color-primary-soft: #e4f2f1;
  --token-color-primary-border: rgba(13, 107, 104, 0.32);
  --token-color-bg-soft: #f3f5f7;
  --token-color-surface: #ffffff;
  --token-color-border: #d5dce3;
  --token-color-title: #0f172a;
  --token-color-muted: #5c6570;
  --token-focus-ring: 0 0 0 2px var(--token-color-surface), 0 0 0 4px rgba(13, 107, 104, 0.38);

  --primary: var(--token-color-primary);
  --primary-hover: var(--token-color-primary-hover);
  --primary-soft: var(--token-color-primary-soft);
  --bg-soft: var(--token-color-bg-soft);
  --line: var(--token-color-border);
  --text-soft: var(--token-color-muted);

  /* Grafikler: teal ailesi + nötr / amber / kırmızı — mor / saf mavi yok */
  --chart-color-1: #0d6b68;
  --chart-color-2: #1a8a86;
  --chart-color-3: #c27803;
  --chart-color-4: #c2410c;
  --chart-color-5: #3f6f6d;
  --chart-color-6: #64748b;
}

body:not(.public-landing-mode) {
  background:
    radial-gradient(circle at 14% 10%, rgba(13, 107, 104, 0.055), transparent 44%),
    radial-gradient(circle at 94% 6%, rgba(15, 23, 42, 0.035), transparent 38%),
    linear-gradient(180deg, #f3f5f7 0%, #e8ecf0 100%);
}

/* --- Top main navigation --- */
.main-nav-row {
  gap: 6px;
}

.main-nav-item {
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--token-color-muted);
}

.main-nav-item:hover {
  background: rgba(13, 107, 104, 0.07);
  color: var(--token-color-title);
  border-color: transparent;
}

.main-nav-item.active {
  color: var(--token-color-primary);
  background: var(--token-color-primary-soft);
  border-color: var(--token-color-primary-border);
  box-shadow: none;
}

.main-nav-item:focus-visible {
  outline: none;
  box-shadow: var(--token-focus-ring);
}

/* --- Primary buttons --- */
.primary-btn,
button.primary-btn {
  background: var(--token-color-primary);
  border-color: var(--token-color-primary);
  color: #fff;
}

.primary-btn:hover,
button.primary-btn:hover {
  background-color: var(--token-color-primary-hover);
  border-color: var(--token-color-primary-hover);
}

.primary-btn:focus-visible,
button.primary-btn:focus-visible {
  outline: none;
  box-shadow: var(--token-focus-ring);
}

/* --- Tabs, chips, commerce --- */
.tab-btn.active,
.tab-chip.active {
  border-color: var(--token-color-primary);
  color: var(--token-color-primary);
  background: var(--token-color-primary-soft);
}

.tab-btn:focus-visible,
.tab-chip:focus-visible {
  outline: none;
  box-shadow: var(--token-focus-ring);
}

.commerce-hub-tab.is-active,
.module-tab-btn.commerce-hub-tab.is-active {
  color: var(--token-color-title);
  border-color: var(--token-color-primary);
  background: var(--token-color-primary-soft);
}

.commerce-hub-tab:focus-visible,
.module-tab-btn.commerce-hub-tab:focus-visible {
  outline: none;
  box-shadow: var(--token-focus-ring);
}

.saas-mini-chart.teal .saas-mini-bar-fill,
.saas-mini-chart.blue .saas-mini-bar-fill {
  background: linear-gradient(180deg, #cfecea 0%, #0d6b68 100%);
}

.dashboard-seg-strip button.is-active {
  border-color: var(--token-color-primary);
  color: var(--token-color-primary);
  background: var(--token-color-primary-soft);
}

.dashboard-seg-strip button:focus-visible {
  outline: none;
  box-shadow: var(--token-focus-ring);
}

.finance-nav-link.active {
  border-left: 3px solid var(--token-color-primary);
  color: var(--token-color-primary);
}

/* --- Profile & quick menus --- */
.topbar-profile-menu,
.topbar-quick-menu {
  border-color: var(--token-color-border);
}

.topbar-menu-item:hover {
  background: var(--token-color-primary-soft);
  color: var(--token-color-title);
}

.topbar-menu-item:focus-visible {
  outline: none;
  box-shadow: var(--token-focus-ring);
}

.qi-icon {
  background: var(--token-color-primary-soft);
  color: var(--token-color-primary);
}

/* --- Secondary pills (e.g. settings integration filters) --- */
.secondary-action.active {
  border-color: var(--token-color-primary);
  color: var(--token-color-primary);
  background: var(--token-color-primary-soft);
}