/* Shared design tokens — app + landing */
:root {
  color-scheme: light;

  --bg-deep:      #FFFFFF;
  --bg-card:      #FFFFFF;
  --surface:      #F7F8FB;
  --surface-2:    #F0F2F6;
  --border:       #E8EAEF;
  --border-input: #D1D5DB;

  --accent:       #F97316;
  --accent-2:     #FB923C;
  --accent-hover: #EA580C;
  --accent-soft:  #FDBA74;
  --accent-dim:   rgba(249, 115, 22, 0.10);
  --accent-lt:    rgba(249, 115, 22, 0.08);
  --accent-mid:   rgba(249, 115, 22, 0.35);
  --accent-dk:    var(--accent-hover);
  --accent-ring:  rgba(249, 115, 22, 0.12);
  --primary:      var(--accent);
  --gradient:     linear-gradient(135deg, var(--accent), var(--accent-2));
  --on-accent:    #FFFFFF;

  --text-main:    #121416;
  --text-muted:   rgba(23, 28, 38, 0.55);
  --text-subtle:  rgba(23, 28, 38, 0.38);

  --danger:       #DC2626;
  --success:      #059669;
  --warn:         #D97706;
  --info:         #0284C7;
  --indigo:       #4F46E5;

  --topbar-bg:    rgba(255, 255, 255, 0.92);
  --body-glow:    rgba(249, 115, 22, 0.06);
  --shadow-color: 0, 0, 0;

  --badge-success-bg: rgba(5, 150, 105, 0.10);
  --badge-success-fg: #047857;
  --badge-danger-bg:  rgba(220, 38, 38, 0.10);
  --badge-danger-fg:  #B91C1C;
  --badge-warn-bg:    rgba(217, 119, 6, 0.10);
  --badge-warn-fg:    #B45309;
  --badge-info-bg:    rgba(2, 132, 199, 0.10);
  --badge-info-fg:    #0369A1;
  --badge-accent-bg:  rgba(249, 115, 22, 0.10);
  --badge-accent-fg:  #C2410C;

  --cal-selected-bg: rgba(249, 115, 22, 0.15);
  --cal-selected-border: rgba(249, 115, 22, 0.35);

  --bg-glass:     var(--accent-dim);
  --overlay:      rgba(0, 0, 0, 0.45);
  --focus-ring:   rgba(249, 115, 22, 0.15);
  --star:         #f59e0b;

  --status-pending-bg: #fef3c7;
  --status-pending-fg: #92400e;
  --status-cancelled-bg: #fee2e2;
  --status-cancelled-fg: #991b1b;
  --status-completed-bg: #d1fae5;
  --status-completed-fg: #065f46;
  --status-danger-bg: #fff5f5;
  --status-danger-border: #fca5a5;
  --status-danger-fg: #b91c1c;

  --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.04), 0 4px 12px rgba(var(--shadow-color), 0.06);
  --shadow-md: 0 8px 24px rgba(var(--shadow-color), 0.12);

  --ease-plata:   cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.2s;
  --radius-card:  24px;
  --radius-sm:    14px;
  --font:         'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

html.dark-theme {
  color-scheme: dark;

  --bg-deep:      #0f1114;
  --bg-card:      #171a1f;
  --surface:      #1a1e24;
  --surface-2:    #22262e;
  --border:       #2a2f38;
  --border-input: #3d4450;

  --text-main:    #f3f4f6;
  --text-muted:   rgba(243, 244, 246, 0.62);
  --text-subtle:  rgba(243, 244, 246, 0.42);
  --accent-dim:   rgba(249, 115, 22, 0.18);
  --accent-lt:    rgba(249, 115, 22, 0.14);
  --accent-mid:   rgba(249, 115, 22, 0.42);
  --accent-ring:  rgba(249, 115, 22, 0.22);
  --focus-ring:   rgba(249, 115, 22, 0.22);

  --status-pending-bg: rgba(217, 119, 6, 0.18);
  --status-pending-fg: #fbbf24;
  --status-cancelled-bg: rgba(220, 38, 38, 0.18);
  --status-cancelled-fg: #f87171;
  --status-completed-bg: rgba(5, 150, 105, 0.18);
  --status-completed-fg: #34d399;
  --status-danger-bg: rgba(220, 38, 38, 0.12);
  --status-danger-border: rgba(248, 113, 113, 0.35);
  --status-danger-fg: #f87171;

  --topbar-bg:    rgba(23, 26, 31, 0.92);
  --body-glow:    rgba(249, 115, 22, 0.08);
  --shadow-color: 0, 0, 0;

  --badge-success-fg: #34d399;
  --badge-danger-fg:  #f87171;
  --badge-warn-fg:    #fbbf24;
  --badge-info-fg:    #38bdf8;
  --badge-accent-fg:  #fb923c;
}

/* Theme toggle — shared across app shell and landing */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle[data-mode="auto"] { box-shadow: inset 0 0 0 2px var(--accent-dim); }

.theme-toggle-floating {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 120;
}

.nav-theme-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}