/* GIVEL PHUKET — Design System. ЕДИНЫЙ источник правды для цветов темы.
   Светлая тема :root, тёмная html[data-theme="dark"]. main.css не содержит
   собственных цветов — только var(--...) из этого файла. */

/* ===== СВЕТЛАЯ ТЕМА ===== */
:root {
  /* Палитра — белый премиальный фон */
  --bg: #ffffff;
  --bg2: #f7f8fa;
  --card: #ffffff;
  --border: #d5dae1;
  --text: #000000;
  --text2: #5c6570;
  --green: #39ff14;
  --cyan: #00e5ff;
  --yellow: #ffe600;
  --purple: #b388ff;
  --red: #ff4757;
  --blue: #4d9fff;
  --pixel-shadow: 0 8px 18px rgba(28, 33, 39, 0.08);
  /* Insets are the law's sums (t27os tri_claw_tma_layout.t27 CSS_TOP_PAD,
     CSS_BOTTOM_INSET); 0 outside Telegram, where env() still applies (#117). */
  --safe-top: calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), calc(var(--tg-safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px)));

  /* Фоновые оттенки для админки */
  --bg-secondary: var(--bg2);
  --bg-tertiary: #f1f5f9;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-glow-green: 0 0 10px rgba(16, 185, 129, 0.2);
  --shadow-glow-cyan: 0 0 10px rgba(6, 182, 212, 0.2);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--green), var(--cyan));
  --gradient-secondary: linear-gradient(135deg, var(--bg2), var(--bg2));
  --gradient-success: linear-gradient(135deg, var(--green), var(--cyan));
  --gradient-disabled: linear-gradient(135deg, rgba(15, 23, 42, 0.1), transparent);

  /* Typography */
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;

  /* Motion */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;

  /* Z-index */
  --z-nav: 1000;
  --z-modal: 2000;

  /* App layout */
  --app-max-width: 480px;
  --app-viewport-height: var(--tg-viewport-height,100vh); /* the law's CSS_APP_HEIGHT */
}

@supports (height: 100dvh) {
  :root { --app-viewport-height: var(--tg-viewport-height,100dvh); }
}

/* ===== ТЁМНАЯ ТЕМА — полная инверсия ч/б ===== */
html[data-theme="dark"] {
  --bg: #0a0a0f;
  --bg2: #0a0a0f;
  --card: #0a0a0f;
  --border: #222222;
  --text: #ffffff;
  --text2: #888888;
  --green: #39ff14;
  --cyan: #00e5ff;
  --yellow: #ffe600;
  --purple: #b388ff;
  --red: #ff4757;
  --blue: #4d9fff;
  --pixel-shadow: 4px 4px 0 #000;

  /* Фоновые оттенки для админки (тёмные) */
  --bg-secondary: #0a0a0f;
  --bg-tertiary: #0a0a0f;
  --muted-text: #94a3b8;
}

/* Фото и QR не инвертируются в тёмной теме */
html[data-theme="dark"] img,
html[data-theme="dark"] video,
html[data-theme="dark"] canvas {
  filter: none;
}

/* ===== Компоненты — тёмная тема (всё здесь, больше нигде) ===== */

/* Bottom nav / tabs */
html[data-theme="dark"] .nav-bar {
  background-color: #0a0a0f !important;
  border-top-color: #222222 !important;
}
html[data-theme="dark"] .nav-item { color: #888888 !important; }
html[data-theme="dark"] .nav-item.active { color: #ffffff !important; }
html[data-theme="dark"] .bottom-nav {
  background: #0a0a0f !important;
  border-top-color: #222222 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Brand bar / header */
html[data-theme="dark"] .brand-bar {
  border-bottom-color: #222222 !important;
  background: #0a0a0f !important;
}
html[data-theme="dark"] .brand-lockup { color: #ffffff !important; }
html[data-theme="dark"] .brand-name { color: #ffffff !important; }
html[data-theme="dark"] .brand-place { color: #888888 !important; }
html[data-theme="dark"] .brand-back { color: #888888 !important; }
html[data-theme="dark"] .screen-title p { color: #888888 !important; }
html[data-theme="dark"] .theme-mark {
  border-color: #222222 !important;
  background: #0a0a0f !important;
  color: #ffffff !important;
}

/* Cards */
html[data-theme="dark"] .obj-card {
  background: #0a0a0f !important;
  border-color: #222222 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] .tier-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .plain-card {
  background: #0a0a0f !important;
  border-color: #222222 !important;
}
html[data-theme="dark"] .form-card {
  background: #0a0a0f !important;
  border-color: #222222 !important;
}
html[data-theme="dark"] .note {
  background: #0a0a0f !important;
  border-color: #222222 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .modal-content {
  background-color: #0a0a0f !important;
  border-color: #222222 !important;
}
html[data-theme="dark"] .modal-header {
  background: #0a0a0f !important;
  border-bottom-color: #222222 !important;
}
html[data-theme="dark"] .toast {
  background: #0a0a0f !important;
  border-color: #222222 !important;
  color: #ffffff !important;
}

/* Buttons */
html[data-theme="dark"] .givel-btn,
html[data-theme="dark"] .btn-view,
html[data-theme="dark"] .btn-submit {
  background: #ffffff !important;
  color: #000000 !important;
}
html[data-theme="dark"] .givel-btn:hover,
html[data-theme="dark"] .btn-view:hover,
html[data-theme="dark"] .btn-submit:hover {
  background: #f0f0f0 !important;
}
html[data-theme="dark"] .givel-btn-quiet,
html[data-theme="dark"] .btn-contact {
  color: #ffffff !important;
}
html[data-theme="dark"] .givel-btn-quiet:hover,
html[data-theme="dark"] .btn-contact:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Form fields */
html[data-theme="dark"] .field {
  background: #1a1a1a !important;
  border-color: #222222 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .form-input {
  background: #1a1a1a !important;
  border-color: #222222 !important;
  color: #ffffff !important;
}

/* Filter chips */
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .radio-label {
  color: #ffffff !important;
  background: #0a0a0f !important;
  border-color: #222222 !important;
}
html[data-theme="dark"] .filter-chip.on,
html[data-theme="dark"] .radio-label.on {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}
html[data-theme="dark"] .filter-tab {
  background: #0a0a0f !important;
  color: #ffffff !important;
  border-color: #222222 !important;
}
html[data-theme="dark"] .filter-tab.active {
  border-color: #ffffff !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Quick actions, stats, admin */
html[data-theme="dark"] .quick-action {
  background: #0a0a0f !important;
  border-color: #222222 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .admin-stat {
  background: #0a0a0f !important;
  border-color: #222222 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}
/* Progress bar */
html[data-theme="dark"] .progress-bar-track {
  background: rgba(255,255,255,0.1) !important;
}

/* App container and page backgrounds */
html[data-theme="dark"] .app-container { background: #0a0a0f !important; color: #ffffff !important; }
html[data-theme="dark"] .givel-page { background: #0a0a0f !important; color: #ffffff !important; }
html[data-theme="dark"] body { background-color: #0a0a0f !important; color: #ffffff !important; }
html[data-theme="dark"] html { background: #0a0a0f !important; }